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目前 ,针对 移动 互联 网 开发 领域 的 ”Web 前 端 工 程 师 ”可 谓 是 热门 抢手 的 岗位 ,通过 
仔细 分 析 岗 位 描述 可 知 ,该 岗位 大 多 要 求 应 聘 者 拥有 “精通 W3C 规范 ,熟练 掌握 CSS、 
HTML 等 Web 技术 “能 够 手写 符合 W3C 标准 的 前 端 页 面 代码 ”等 岗位 技能 。 本 书 在 紧 
密 结合 市 场 需 求 的 前 提 下 ,以 HTML 5 和 CSS 3 的 基础 知识 作为 重点 讲解 对 象 ,在 W3C 
规范 的 指导 下 ,将 前 端的 思维 模式 融入 每 个 知识 点 中 ,再 配合 免费 的 微 课 视频 ,使 读者 完 
全 能 够 自主 学 习 。 

全 书 共 分 为 12 章 , 根 据 知识 的 难 易 程度 和 学 习 者 的 学 习习 惯 , 对 HTML 5 和 CSS 3 
知识 进行 无 颖 衔接 ,使 每 章 有 理论 ,堂堂 有 案例 , 课 后 有 实 训 。 本 书 主要 内 容 包括 : 网 页 
设计 基础 ,HTML 语言 基础 ,Dreamweaver 基础 与 CSS 入门 ,文本 与 图 像 , 浮 动 , 定 位 和 
列表 ,表格 与 表单 ,框架 、 模 板 与 CSS 3 新 增 布局 ,行为 与 Spry 构件 ,CSS 进 阶 ,站 点 测试 、 
上 传 与 维护 ,综合 案例 解析 一 一 电子 商务 网 站 以 及 实 训 指导 。 

本 书 具 有 以 下 特色 。 

。 微 课 视 频 : 所 有 知识 点 均 包 含 在 许多 短小 的 视频 中 ,不 受 时 空 限制 ,扫描 二 维 码 
就 能 预习 或 复习 所 学 知识 。 
贴近 岗位 : 本 书 涉及 的 内 容 均 是 互联 网 类 岗位 中 必 不 可 少 的 知识 ,通过 学 习 读 者 
能 够 获得 岗位 需求 的 基本 能 力 。 

精 选 案例 : 每 章 包含 “过 程 指导 ”环节 ,通过 精心 挑选 的 实战 案例 ,以 及 详 略 得 当 
的 过 程 指导 ,读者 在 学 习 过 程 中 能 够 直观 清晰 地 看 到 操作 过 程 和 效果 。 


。 自主 任务 : 每 章 包 含 “ 自 主任 务 环 节 , 留 出 时 间 让 读者 参照 * 过 程 指导 ?进行 实 训 
练习 。 


配套 资源 : 本 书 提供 全 套 源 文件 、 微 课 视 频 、PPT 课件 、 课 时 授课 计划 和 学 期 授课 
计划 ,读者 可 以 从 清华 大 学 出 版 社 网 站 (http: //www. tup. tsinghua. edu. cn) 
下 载 。 

本 书 既 可 作为 应 用 型 本 科 以 及 各 层次 职业 院 校 计算 机 相关 专业 的 教材 ,也 可 作为 IT 
类 培训 机 构 的 网 页 设计 培训 教程 。 

本 书 的 参考 学 时 为 60 学 时 ,为 了 方便 教学 ,这 里 提供 各 章 任务 的 学 时 分 配 , 详 见 
下 表 。 
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序号 章节 内 容 
理论 实践 小 计 
第 1 章 网 页 设计 基础 1 1 2 
第 2 章 HTML 语言 基础 2 4 6 
第 3 章 Dreamweaver 基础 与 CSS 入 门 2 4 6 
第 4 章 文本 与 图 像 2 4 6 
第 5 章 浮动 .定位 和 列表 2 4 6 
第 6 章 表格 与 表单 2 2 4 
第 7 章 框架 ,模板 与 CSS 3 新 增 布局 4 4 8 
第 8 章 行为 与 Spry 构件 1 1 2 
第 9 章 CSS 进 阶 2 4 6 
第 10 章 站 点 测试 .上 传 与 维护 1 1 2 
第 11 章 综合 案例 解析 一 一 电子 商务 网 站 1 : 4 
第 12 章 实 训 指导 0.5 六 8 
合计 60 
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第 1 章 





网 页 设计 基础 


【本 章 导读 】 

随 着 HTML 5 的 长 足 发 展 ,移动 互联 网 一 边 推动 着 场景 的 裂变 ,一 边 促 使 着 消费 升 
级 和 数据 变革 。 面 对 当前 流行 的 "Web 前 端 工 程 师 ”等 工作 岗位 ,精通 HTML、CSS, 熟 悉 
页 面 架构 和 布局 已 经 成 为 任职 的 必 备 条 件 。 本 章 在 引导 读者 了 解 最 基本 的 网 页 知识 的 基 
础 上 ,着 重 从 思维 方式 方面 讲述 “表现 与 结构 相 分 离 ”的 重要 理念 。 

【学 习 目 标 】 

名 了解 Web 标准 的 相关 知识 ; 

吕 充分 理解 “表现 与 结构 相 分 离 ” 的 重要 思想 ,以 及 HTML 5 的 必要 性 ; 

名 了 解 有 关 网 页 制作 的 基本 知识 ,熟知 网 站 建设 的 基本 流程 。 


1.1 Web 时 代 的 重要 理念 


随 着 HTML 5 的 迅猛 发 展 ,各 大 浏览 器 开发 商 对 HTML 5 的 支持 
越 来 越 完 善 。 从 前 端 开发 技术 角度 来 看 ,互联 网 的 发 展 经 历 了 以 
HTML 和 CSS 为 主 的 Web 1.0 时 代 , 以 Ajax 应 用 为 主 的 Web 2.0 时 代 , 正 在 迈进 以 
HTML 5 为 主 的 魏 新 时 代 。 

在 此 发 展 趋势 下 ,学 习 HTML 5 以 及 CSS 3 技术 无 疑 成 为 Web 前 端 开发 者 的 重要 
任务 ,本 节 首 先 从 思想 方面 引导 读者 理解 网 页 制作 的 相关 理念 。 


1.1.1 Web 标准 简介 


Web 标准 (Web Standards) 即 网 站 标准 , 它 并 非 是 某 一 个 标准 ,而 是 一 系列 标准 的 集 
合 。 这 些 标准 是 由 W3C 和 ECMA 共同 制定 的 ， go 
用 来 创建 和 规范 网 页 的 基本 内 容 。 按 照 这 些 标准 ” 国 员 几 时光 
制作 的 网 页 ,能 够 体现 “表现 与 结构 相 分 离 " 这 一 ” 世 地 
核心 理念 。 


具体 地 讲 , Web 标准 主要 由 3 方面 的 标准 构 WJ 
成 ,结构 标准 语言 (主要 包括 HTML、XHTML 和 


XML) .表现 标准 语言 (主要 包括 CSS) ,行为 标准 语 
言 (主要 包括 DOM 和 ECMAScript 等 ), 这 些 标准 


共同 组 合 起 来 称 为 Web 标准 ,如 图 1-1 所 示 。 1-1 Web 标准 示意 图 
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1. 结构 标准 语言 

1) HTML 4.01 

HTML(HyperText Markup Language, 超 文本 置 标语 言 ) 是 构成 网 页 文档 的 主要 语 
言 。HTML 文档 包含 了 很 多 标签 ,其 目的 是 为 网 页 文档 增加 结构 信息 ,告诉 浏览 器 如 何 
显示 页 面 。 浏 览 器 在 解析 这 些 包含 标题 段落 等 标签 的 文档 后 ,用 相应 的 表现 形式 即 可 将 
页 面 展现 出 来 。 

2) XML 1.0 

XML(eXtensible Markup Language, 可 扩展 置 标语 言 ) 是 当前 处 理 结构 化 文档 信息 
的 有 力 工具 。 它 由 W3C 发 布 ,起 初 的 目的 是 用 来 弥补 HTML 的 不 足 , 但 后 来 逐渐 用 于 
网 络 数据 的 转换 和 描述 方面 。 

简单 地 说 ,XML 是 一 种 表示 数据 的 方式 ,可 以 通过 多 种 方法 使 用 XML 封装 数据 ,一 
种 常见 的 处 理 方式 是 通过 XSLT( 可 扩展 样式 表 语 言 转换 ) 对 XML 文档 进行 转换 ,以 生 
成 特定 的 结果 ,例如 ,转换 成 (X)HTML 输出 给 浏览 器 使 用 等 。 

3) XHTML 1.0 

XHTML(The eXtensible HyperText Markup Language, 可 扩展 超 文本 置 标语 言 ) 实 
际 上 是 将 HTML 根据 XML 规范 进行 重新 定义 , 它 的 标签 与 HTML 4. 01 一 致 ,而 格式 
却 严格 遵循 XML 规范 。 

XHTML 有 3 种 DTD 定义 : 严格 的 (Strict)、 过 渡 的 (Transitional) 和 框架 的 
(Frameset) 。 

4) HTML 5 

HTML 5 是 HTML 的 第 五 个 版 本 ,其 中 新 增 了 多 种 标签 ,并 且 可 以 进行 跨 平 台 的 使 
用 ,更 多 内 容 将 在 后 续 章节 中 陆续 介绍 。 

2. 表现 标准 语言 

CSS(Cascading Style Sheet, 层 人 样式 表 ) 是 一 组 用 来 控制 网 页 外 观 的 规则 。 通 过 
CSS 可 以 将 样式 信息 与 网 页 内 容 分 离开 来 ,不 仅 使 站 点 外 观 维护 变 得 更 为 简便 ,还 可 以 
使 (X)HTML 文档 代码 结构 清晰 内容 简练 ,有 利于 缩短 浏览 器 加 载 页 面 的 时 间 。 目 前 ， 
CSS 的 版 本 有 CSS 2.0、CSS 2.1 和 CSS 3. 0。 

3. 行为 标准 语言 

1) DOM 

DOM(Document Object Model ,文档 对 象 模 型 ) 是 HTML 与 XML 的 应 用 编程 接口 ， 
它 使 脚本 语言 能 够 很 容易 地 访问 整个 文档 的 结构 ,内容 和 表现 。 

DOM 是 HTML 与 XML 文档 的 编程 基础 , 它 定 义 了 处 理 执行 文档 的 途径 。 编 写 
可 以 使 用 DOM 增加 文档 、 定 位 文档 结构 、 添 加 修改 删除 文档 元 素 ,可 以 说 DOM 给 了 脚 
本 语言 (如 ECMAScript) 无 限 发 挥 的 能 力 。 

2) ECMAScript 

ECMAScript 是 ECMA (European Computer Manufacturers Association ,欧洲 计算 
机 厂商 协会 ) 制 定 的 一 种 基于 Netscape JavaScript 的 标准 脚本 语言 。 这 种 语言 在 互联 网 
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上 广泛 应 用 ,通过 DOM 可 以 操作 网 页 上 的 任何 对 象 。 由 于 这 些 改变 对 象 的 操作 十 分 容 
易 ,使 得 网 页 交互 性 大 大 增加 。 
1.1.2 表现 与 结构 相 分 离 

在 Web 标准 中 ,经 常会 提 到 “表现 与 结构 相 分 离 ” 这 句 话 ,如 何 快速 理解 其 含义 呢 ? 
这 里 从 网 页 的 内 容 、 结 构 ,表现 和 行为 四 个 方面 进行 阐述 。 

1. 内 容 

这 里 的 “内 容 ? 是 指 访问 者 需要 获取 的 信息 , 它 可 以 是 数据 ,文字 和 图 片 等 类 型 ,不 包 
含 诸如 装饰 性 图 片 在 内 的 辅助 信息 。 图 1-2 所 示 的 是 仅 包含 “内 容 ” 的 页 面 ,图 1-3 所 示 
的 是 添加 辅助 信息 后 的 页 面 。 


[Css Zen Garden 





The Beauty of Desien 


A demonstration of what can be accomplished through CSS-based design Select any style sheet from 
the list to load it into this page. 


Downloud the example html file and css file 





The Road to Enlightennent 


Littering a dark and dreary road lay the past relics of browser-specific tags, inconpatible DONs, 
br oken CSS support, and abandoned browsers. 


We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless 
efforts of folk like the WIC, WaSP, and the major browser creators, 


The CSS Zen Garden invites you to relax and neditate on the inportant lessons of the masters，Begin 
to see with clarity. Learn to use the tine-honored techniques in new and invigorating fashion 
Become one with the web 








图 1-2 仅 包 含 “内 容 ” 的 页 面 


一 PP 


全 ) edNEEGTTID] al 


Ademonstration of what can be accomplished 
through CSS-based design. Select any style sheet Andrew 
Lohman 
from the list to load it into this page 
Download the example 天 ;iTML PILEand GARMENTS 
i E an Mall 








图 1-3 添加 辅助 信息 后 的 页 面 


2. 结构 
“结构 (Structure) "是 指 将 内 容 按照 一 定 的 类 别 和 层次 进行 有 机 排列 与 搭配 的 层次 
结构 ,该 结构 具有 逻辑 延续 性 。W3C 规范 的 结构 标准 语言 主要 包括 HTML、XHTML 和 


/ 
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HTML 5, 通 过 这 些 语 言 能 够 使 页 面 内 容 具 有 逻辑 性 、 易 用 性 。 

在 HTML 5 中 包含 许多 语义 化 的 结构 化 的 标签 ,如 所 section 之 二 /section 二、 
< 一 article 二 二 /article 之 和 二 header 盖 二 /header 二 等 ,这 些 标签 的 使 用 方法 将 在 后 续 章 节 
中 讲解 。 

3. 表现 

用 来 改变 内 容 外 观 的 样式 称 为 表现 (Presentation) 。W3C 创建 表现 语言 CSS 标准 的 
目的 就 是 希望 CSS 取代 HTML 中 表格 式 布 局 的 语言 ,最 终 实现 表现 与 结构 相 分 离 , 图 1-4 
所 示 的 就 是 通过 CSS 样式 实现 外 在 表现 的 网 站 实例 。 


Connecting pictures 


Vamus vol volt tortor, suscipit nisl Curabitur auctor 


Lorem psum dokor amet consecfet Leam more 





图 1-4 通过 CSS 样式 实现 外 在 表现 的 网 站 实例 


4. 行为 

行为 (Behavior) 是 指 对 内 容 的 交互 及 其 操作 的 效果 。 图 1-5 所 示 的 是 在 网 站 注册 用 
户 时 的 场景 , 当 在 “账户 名 ”中 输入 待 注 册 的 邮箱 地 址 时 ,页 面 右 侧 会 实时 浮动 提示 框 , 实 
时 提醒 用 户 注册 时 需要 注意 的 问题 ,这 些 页 面 中 的 变化 都 要 归 为 DOM 和 JavaScript 的 





回 + 手机 : 国 -| 0086 99999999 @@ 手机 引 长 度 11 位 ， 以 13114/15/17/18 开 
头 
或 使 用 邮箱 注册 R 
+ 设置 密码 : 全 请 往 入 室友 


+ 激活 码 : ”免费 获取 短信 激活 码 


收 不 到 验证 码 ? 


图 1-5 行为 的 外 在 表现 
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作用 ,是 它们 把 行为 表现 出 来 的 。 

综 上 所 述 ,页 面 是 由 “结构 “表现” 和 “行为 ”这 3 方面 组 成 的 ,内 容 是 基础 层 ,然后 是 
附加 上 去 结构 层 和 表现 层 , 最 后 再 对 其 添加 行为 。 刚 开始 理解 结构 和 表现 相 分 离 可 能 有 
点 困难 ,但 是 这 一 点 确实 非常 重要 。 当 结构 和 表现 相 分 离 后 ,用 CSS 文档 控制 表现 就 十 
分 方便 ,例如 ,要 想 让 整个 网 站 的 字体 增 大 点 ,只 要 简单 地 修改 CSS 文档 中 的 一 个 定义 就 
可 以 改变 整个 网 站 的 字体 大 小 , 整 站 的 维护 显得 更 为 容易 。 

所 以 ,初学 者 刚 开 始 学 习 就 要 养 成 将 结构 和 表现 放 在 不 同 的 文件 中 ,通过 链接 将 CSS 
文档 或 JavaScript 文档 与 HTML 文件 联系 起 来 的 习惯 。 


1.1.3 HTML 5 时 代 


HTML 5 从 本 质 上 改变 了 Web 应 用 的 运作 模式 ,无 论 是 桌面 浏览 器 还 是 手机 的 移 
动 应 用 ,这 种 语言 和 标准 正在 极 大 限度 地 影响 各 种 操作 平台 。HTML 5 的 目标 是 编写 出 
更 加 有 语义 的 HTML 代码 ,以 及 创建 更 加 简单 的 Web 程序 ,为 此 它 增 加 了 许多 新 属性 和 
新 元 素 , 并 提供 很 多 API, 为 下 一 代 Web 平台 提供 了 许多 新 功能 ,图 1-6 所 示 的 是 已 经 使 
用 HTML 5 构建 页 面 的 苹果 公司 官方 网 站 页 面 。 





多 WATCH 


SERIES2 





Series 2 新 登场 。 








图 1-6 使 用 HTML 5 构建 的 页 面 


在 HTML 5 之 前 ,诸如 让 文本 框 获得 光标 焦点 之 类 的 功能 需要 使 用 JavaScript 等 脚 
本 语言 才能 实现 ,如 果 使 用 HTML 5 则 只 须 使 用 元 素 的 属性 标签 即 可 完成 。 如 此 一 来 ， 
整个 页 面 显得 非常 简洁 ,容易 理解 。 

此 外 ,HTML 5 新 增 的 语义 化 的 属性 标签 ,使 页 面 结构 变 得 十 分 清晰 ,弱化 了 无 语义 
的 二 div 之 标签 ,这 种 语义 化 的 特征 不 仅 提升 了 网 页 的 质量 和 语义 ,还 大 量 减 少 了 曾经 代 
码 中 用 于 CSS 必须 调用 的 class 和 id 属性 ,如 图 1-7 和 图 1-8 所 示 。 





pe 
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语义 化 标签 有 利于 
检索 ， 页 面 结构 清晰 


滥用 无 语义 的 <div> 标 签 ， 会 使 
代码 颇 肿 ， 不 利于 维护 和 美化 





FEaayy 
|<header id="page header"> 
<nav> </navy 
/header> 
|<aection id="posts"> 
<article class="post"></article> 
[c/section> 
Ksection id="sidebar"> 
<navy</navy> 
</secctiony 
|<Foorer id="page footer"></footer> 
/pody> 








[Easyy T 
|<aiv id="header"> 

xdiv id-"header nav">y¢/div> 
</div> 
<aiv id="main"> 

<div id="conrent"></div> 
[</div> 
<aiv id="sider"> 

<div id="sider nav"></div> 
</div> 
<aiv iq="footer"></div> 





(</body> 





图 1-7 HTML 5 与 DIV 十 CSS 思维 模式 下 代码 对 比 





body 








<header id="page_header"> 对 比 <div id="header'> 
<nav> 对 比 <div id="header_nav"> 











<section id="posts"> 对 比 <div id="main"> 





<article class="post"> 
对 比 


<div id="content"> 








<section id="sidebar"> 对 比 <div id="sider"> 





<nav> 


对 比 


<div id="sider_nav"> 














<footer id="page_footer'> 对 比 <div id="footer"> 








图 1-8 页 面 结构 示 意图 


1.2 网 站 的 人 门 知识 
1.2.1 网 页 、 网 站 及 其 构成 元 素 


1. 网 页 


网 页 (Web Page) 是 一 个 文件 , 它 存放 在 某 一 台 与 互联 网 相连 的 计算 机 中 。 


2. 网 站 


网 站 (Website) 是 用 于 展示 特定 内 容 的 相关 网 页 的 集合 ,网 站 中 各 个 网 页 是 由 超 链接 


3. 网 页 的 构成 元 素 


联系 起 来 的 。 访问 者 进入 某 个 网 站 后 ,看 到 的 第 一 个 页 面 称 为 首页 ,通常 首页 的 文件 名 是 
index 或 default 加 上 扩展 名 。 


在 互联 网 中 ,网 页 的 外 观 多 种 多 样 , 但 构成 网 页 的 基本 元 素 却 大 体 相同 ,一 般 包 括 文 


第 1 章 网 页 设计 基础 


本 、 图 像 .表单 .视频 和 音频 ,如 图 1-9 所 示 。 此 外 , 某 些 宣传 类 网 站 还 采用 纯 Flash 动画 
展现 网 站 内 容 。 








sn 国 世 EEC 
le huawei wore 1 于 | Tatas im (一 一 一 一 | 一 表单 


行业 有。 方 备 5 六 品 。 技术 广 持 。。 关于 全 为。 捍 体 中 心 






MOBILE CHANGES 
THE WORLD 
2014 世 界 移动 通信 大 会 


借助 JavaScript 20142.24-27 已 守 史 硬 ， 西 下 于 
实现 的 图 像 一 | 
滚动 动画 





TT RS 


中 国 阴 动 公有 有 云 生 世 和 和 


一 图 像 








图 1-9 网 页 的 构成 元 素 


对 于 网 页 中 包含 的 各 类 元 素 ,读者 需要 了 解 以 下 知识 。 

1) 文本 和 图 像 

文本 和 图 像 是 网 页 中 最 基本 的 构成 元 素 。 对 于 文本 ,设计 者 可 以 使 用 不 同 的 字体 来 
美化 文本 内 容 ; 对 于 图 像 ,一 般 使 用 Photoshop 预先 进行 处 理 , 然 后 输出 合适 的 图 像 ,网 页 
中 使 用 最 多 的 是 JPEG、PNG 和 GIF 图 像 格式 。 

2) 超 链接 

超 链 接 是 指 超 文 本 内 由 一 文件 连接 至 另 一 文件 的 链接 。 当 用 户 单 击 超 链 接 时 ,其 指 
向 的 目标 内 容 将 显示 在 用 户 的 浏览 器 中 。 

在 默认 情况 下 ,浏览 器 会 用 一 些 特殊 的 方式 来 显示 超 链 接 , 如 鼠标 悬 停 时 的 颜色 改 
变 、 触 发 超 链接 时 的 颜色 改变 等 ,而 要 想 改 变 这 些 显 示 属 性 需要 在 CSS 中 修改 。 

3) 表单 

表单 通常 用 来 收集 信息 或 实现 一 定 的 交互 效果 ,其 主要 功能 是 收集 用 户 在 浏览 器 中 
输入 的 信息 ,然后 将 这 些 信 息 发 送 到 目的 端 。 

4) 动画 

目前 ,在 网 页 中 插入 Flash 动画 的 做 法 越 来 越 少 ,通常 设计 者 会 使 用 jQuery、 
JavaScript、CSS 和 HTML 5 制作 精美 动画 ,而 对 于 广告 类 的 动画 一 般 采 用 技术 含量 较 低 
的 GIF 动画 进行 展示 。 
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5) 音频 和 视频 

音频 和 视频 并 非 网 站 必需 的 元 素 ( 以 音频 和 视频 为 主题 的 网 站 除外 ) ,因为 未 经 访问 
者 许可 自动 播放 的 音频 和 视频 ,可 能 会 给 访问 者 带 来 不 便 。 常 见 的 音频 格式 为 MP3, 视 
频 格式 为 FLV。 


1.2.2 网 页 设计 的 原则 .风格 和 潮流 


用 户 体验 良好 的 网 页 交互 设计 ,不 在 于 使 用 了 何 种 先进 的 技术 ,而 是 取决 于 对 整个 页 
面 主题 \ 风 格 、 整 体 布局 和 制作 水 平 的 精确 把 握 。 


1. 网 站 设计 的 基本 原则 

网 站 外 观 设计 的 精美 程度 直接 关系 到 门户 网 站 的 外 在 形象 和 访问 者 的 使 用 效率 ,以 
下 是 网 站 设计 中 应 注意 的 几 点 基本 原则 。 

1) 明确 网 站 目标 和 用 户 需 求 

网 站 建立 的 目的 无 非 是 展现 目标 形象 产品 或 服务 ,并 给 浏览 者 提供 所 需 的 信息 , 因 
此 必须 针对 不 同 的 客户 群体 、 针 对 访问 者 的 需求 ,市场 环境 以 及 自身 情况 等 因素 进行 综合 
分 析 , 明 确 网 站 目标 和 用 户 需求 。 网 页 设计 的 中 心 始终 是 访问 者 ,而 不 能 完全 以 视觉 效果 
为 中 心 。 

2) 主题 鲜明 

在 明确 目标 的 基础 上 ,通过 具体 的 功能 去 实现 网 站 的 主题 。 设 计 功 能 时 要 根据 不 同 
的 服务 对 象 采用 不 同 的 形式 ,可 以 调动 多 种 创造 手法 充分 表现 网 站 特点 ,做 到 主题 鲜明 ， 
要 点 明确 。 网 站 可 以 顾及 多 个 层次 的 对 象 ,但 必须 有 一 个 主体 对 象 ,要 用 简单 明确 的 语言 
和 画面 体现 站 点 的 主题 。 

3) 注重 布局 设计 

网 页 设计 以 科学 技术 和 视觉 艺术 为 基础 ,追求 网 页 编排 功能 和 布局 的 协调 美观 。 网 
页 的 布局 设计 通过 文字 和 图 像 等 元 素 的 空间 组 合 ,表达 出 网 页 和 谐 的 美 , 也 使 浏览 者 有 一 
个 流畅 的 视觉 体验 。 

4) 避免 滥用 技术 

网 页 技术 多 种 多 样 ,运用 恰当 的 技术 能 使 网 页 棚 棚 如 生 , 有 些 网 页 设计 人 员 喜 欢 使 用 
多 种 网 页 技术 丰富 自己 的 设计 ,殊不知 如 果 技 术 使 用 不 当 , 则 会 适得其反 。 因 此 ,使 用 网 
页 技术 时 最 好 不 要 太 过 复杂 。 

5) 及 时 更 新 维护 

访问 者 总 是 希望 看 到 新 鲜 的 信息 内 容 , 所 以 网 站 建立 后 要 不 断 地 更 新 内 容 , 保 证 信息 
的 时 效 性 ,这 是 一 项 非常 重要 的 工作 。 


2. 颜色 与 风格 

1) 颜色 

颜色 作为 网 页 视觉 元 素 的 一 部 分 .具有 不 可 估量 的 作用 。 颜 色 搭配 是 网 页 设计 人 员 
需要 慎重 考虑 的 问题 ,良好 的 色彩 搭配 能 使 网 页 内 容重 点 突出 ,风格 统一 ,易于 浏览 ,大 大 
强化 网 页 的 视觉 张力 。 网 页 中 的 颜色 搭配 可 以 从 以 下 几 方 面 进行 考虑 。 
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(1) 颜色 种 类 。 在 网 页 中 使 用 的 颜色 尽量 不 要 超过 4 种 ,颜色 太 多 会 使 浏览 者 感觉 
没有 重点 。 当 主题 颜色 确定 后 ,可 以 考虑 调整 透明 度 或 饱和 度 , 以 得 到 一 系列 的 颜色 ,这 
样 能 使 页 面 看 起 来 具有 层次 感 。 

(2) 总 体 统 一 ,局 部 反差 。 网 页 的 总 体 色调 应 该 是 统一 的 ,在 某 些 局 部 或 小 范围 内 可 
以 使 用 一 些 强烈 的 色彩 对 比 , 这 样 能 起 到 锦上添花 的 作用 。 此 外 ,色彩 还 受 文化 传统 .地 
域 等 因素 的 影响 ,充分 运用 这 些 特性 ,可 以 使 页 面具 有 深刻 的 文化 底蕴 。 

(3) 文字 与 背景 色 的 对 比 。 网 页 背景 色 的 深浅 要 运用 合理 。 一 般 地 , 深 色 背景 要 拱 
配 浅 色 文字 , 浅 色 背 景 要 搭配 深 色 文字 。 但 是 色彩 的 明度 反差 不 能 过 大 ,否则 屏幕 上 的 亮 
度 反 差 太 强 , 会 使 访问 者 眼睛 感到 不 适 。 


2) 风格 
风格 即 网 站 的 特点 ,是 浏览 者 对 网 站 内 容 和 形式 的 直观 感受 ,所 透露 出 来 的 是 设计 者 
的 文化 品位 。 


有 价值 的 内 容 是 网 站 风格 的 基础 ,而 创意 则 是 风格 的 灵魂 。 从 访问 者 接收 信息 的 顺 
序 来 看 ,起 初 网 站 的 外 观 是 吸引 访问 者 的 关键 , 随 着 浏览 者 不 断 深入 了 解 , 会 逐渐 增加 对 
网 站 内 容 的 各 种 感受 ,为 此 网 站 的 风格 定位 可 从 以 下 几 方 面 考虑 。 

(1) 确保 网 页 界面 有 较 强 的 一 致 性 ,使 网 站 形成 统一 的 风格 界面 。 这 里 的 一 致 性 包 
括 字体 ,标题 ,图 像 . 背 景 颜 色 和 注脚 等 。 这 些 构 成 网 页 的 基本 元 素 形成 统一 的 整体 ,具有 
自身 特色 风格 ,会 使 访问 者 获得 更 深层 次 的 感性 认 知 。 

(2) 确保 网 页 界面 美观 简洁 ,易于 访问 。 

(3) 合理 安排 网 页 元 素 ,要 让 访问 者 在 浏览 网 页 过 程 中 体验 到 视觉 的 秩序 感 , 节 奏 感 
和 新 奇 感 。 

一 般 地 ,在 实际 应 用 中 政府 类 的 网 站 表现 出 庄严 、 严 谨 的 风格 ;公司 企业 类 的 网 站 具 
有 主题 突出 、 风 格 简约 的 特点 ;娱乐 类 网 站 则 以 活泼 ,时尚 、 生 动 为 主要 风格 ;个 人 网 站 则 
注重 突出 个 性 化 的 特点 。 


3. 网 站 赏析 

由 于 不 同类 型 的 网 站 在 定位 目标 群体 时 存在 差异 ,因此 出 现 不 同类 型 和 风格 的 页 面 。 
下 面 从 流行 设计 趋势 角度 向 读者 介绍 一 些 精明 的 网 站 设计 。 

1) 扁平 化 设计 类 网 站 

扁平 化 设计 的 核心 是 放弃 一 切 装饰 效果 ,诸如 阴影 、 透 视 ,纹理 和 渐变 等 ,所 有 元 素 的 
边界 都 干净 利落 ,没有 任何 羽化 ,渐变 或 阴影 ,如 图 1-10 所 示 。 

2) 全 屏 背 景 类 网 站 

目前 , 越 来 越 多 的 设计 师 青睐 全 屏 背 景 的 设计 ,他 们 大 多 采用 大 图 、 视 频 、 精 致 的 背景 
纹理 吸引 用 户 的 眼球 ,如 图 1-11 所 示 。 

3) 卡通 插画 风格 类 网 站 

令 人 愉悦 的 卡通 人 物 和 妙趣 横生 的 图 像 极 富 娱 乐 性 ,设计 师 通 过 各 种 艺术 风格 为 网 
页 加 入 一 些 趣味 性 的 元 素 , 这 也 使 网 页 不 再 循规蹈矩 ,如 图 1-12 所 示 。 


人、 


Dreamweaver CS6 十 HTML 5 十 CSS 3 网 页 制作 基础 教程 ( 微 课 版 ) 














2. Import to Liberio 3. Publish your eBook 


sly with Googt 





oduces epubs compliant tothe 





lbe ready 





lease and Import directly 





into Liberi 





图 1-10 ”扁平 化 设计 类 网 站 (http: //liber. io/) 
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图 1-12 卡通 插画 风格 类 网 站 (https: //www. webdesignlab. net/) 
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1.2.3 网 站 建设 的 基本 流程 


网 站 建设 前 期 除了 与 客户 保持 良好 的 沟通 和 交流 外 ,更 重要 的 是 要 
遵循 网 站 建设 的 基本 流程 ,如 图 1-13 所 示 。 只 有 这 样 , 才 能 做 到 既 不 浪 
费时 间 又 能 提高 网 页 制作 人 员 的 工作 效率 ,同时 还 能 保证 网 站 的 科学 性 
和 严谨 性 。 
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图 1-13 网 站 建设 的 基本 流程 





1. 前 期 一 一 调研 与 策划 

网 站 前 期 的 调研 与 策划 是 网 站 能 够 成 功 运 作 的 重要 环节 。 在 此 环节 中 主要 对 市 场 进 
行 分 析 ,充分 与 客户 沟通 ,掌握 其 真实 需求 ,确定 网 站 的 目标 、 核 心 功能 .风格 定位 等 内 容 。 
一 般 地 ,网 站 前 期 调研 与 规划 主要 涉及 以 下 几 个 方面 。 

1) 用 户 需 求 调研 

网 站 建设 的 团队 要 与 客户 进行 充分 交流 ,正确 引导 客户 将 自己 的 实际 需求 表达 出 来 ， 
以 明确 建设 网 站 的 目的 和 具体 要 求 。 必 要 时 还 要 请 客户 提供 他 们 所 欣赏 的 网 站 实例 , 进 
一 步 确定 用 户 的 理想 目标 和 功能 需求 。 在 充分 了 解 客 户 的 所 有 要 求 后 ,结合 网 站 的 技术 
特点 ,提出 网 站 的 设计 草案 ,与 客户 反复 商讨 ,以 得 到 客户 的 认可 。 

2) 搜集 整理 素材 

明确 了 网 站 的 主题 后 ,就 要 围绕 网 站 主题 搜集 素材 。 客 户 提供 的 各 种 资料 是 非 
常 重要 的 素材 之 一 ,此 外 还 需要 详细 搜集 与 主题 相关 的 图 片 、 文 字 、 音 频 、 视 频 和 动 
画 等 内 容 。 

3) 网 站 策划 

网 站 策划 的 好 坏 将 直接 影响 网 站 的 整体 效果 ,而 且 是 网 站 发 布 后 能 和 否 成 功 运行 的 重 
要 因素 。 网 站 策划 所 涉及 的 方面 很 多 ,主要 包括 网 站 的 整体 结构 、 主 题 定位 、 风 格 设计 、 色 
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彩 搭配 ,版面 布局 ,文字 与 图 片 的 运用 及 网 站 策划 书 的 撰写 等 。 只 有 在 网 页 具体 制作 前 把 
这 些 方面 都 考虑 全 面 了 ,制作 出 来 的 网 页 才 具 有 吸引 力 。 可 以 说 网 站 策划 对 整个 网 站 建 
设 具有 指导 和 定位 的 作用 。 

4) 选择 服务 器 解决 方案 

一 般 地 ,服务 器 的 解决 方案 有 自 备 主机 、 租 用 虚拟 主机 、 主 机 托管 等 ,具体 情况 要 根据 
客户 的 实际 需要 确定 。 


2. 中 期 一 一 实施 与 细 化 

中 期 环节 是 网 站 建设 的 具体 实施 与 细 化 阶段 ,在 前 期 策划 得 到 客户 认可 后 ,需要 将 整 
个 网 站 建设 细 化 为 两 大 部 分 进行 ,一 是 前 台 页 面 设计 与 制作 ;二 是 后 台 程序 的 功能 开发 与 
实现 。 具 体内 容 主要 涉及 以 下 几 个 方面 。 

1) 网 站 外 观 设计 

网 站 外 观 设计 将 直接 影响 访问 者 的 兴趣 ,精心 策划 的 网 站 建设 方案 最 终 是 要 通过 
网 页 表现 出 来 ,因此 必须 在 页 面 制作 风格 上 有 一 个 明确 的 定位 ,使 网 站 的 基本 格调 符 
合 客户 的 要 求 。 网 站 外 观 设 计 主要 包括 Logo 设计 ,标准 字 ,标准 色 ,布局 ,Banner、 图 标 
和 菜单 等 。 一 般 地 ,需要 设计 多 套 不 同 风格 的 样稿 交 客 户 讨 论 并 提出 修改 意见 ,直到 
客户 认可 。 

2) 页 面 制作 

在 网 站 外 观 设计 完成 后 ,就 要 将 其 制作 成 HTML 页 面 , 供 后 台 程 序 开发 人 员 将 程序 
整合 在 页 面 中 。 制 作 页 面 时 ,首先 要 对 设计 稿 的 布局 和 配色 有 整体 认识 ;其 次 根据 规划 要 
求 对 设计 稿 进行 切片 ;最 后 使 用 CSS 布局 的 方式 将 网 页 制作 出 来 。 

3) 后 台 程 序 开 发 

后 台 程 序 主要 实现 后 台数 据 库 的 事务 处 理 , 同 时 负责 数据 库 与 前 台 页 面 间 的 连接 。 
程序 开发 人 员 在 编写 Web 程序 时 ,需要 选择 合适 的 解决 方案 将 页 面 文件 与 事务 逻辑 结合 
在 一 起 。 

4) 网 站 测试 

网 站 制作 是 一 个 非常 复杂 的 过 程 ,需要 经 过 反复 的 测试 .审核 和 修改 , 待 确定 无 误 后 
才能 正式 发 布 。 测 试 的 项 目 一 般 包 括 文字 内 容 的 正确 性 各 链接 的 有 效 性 、 浏 览 器 兼容 
性 、 功 能 模块 的 正确 性 。 在 测试 过 程 中 ,需要 反复 听取 各 方 意见 和 建议 ,不 断 完善 功能 , 直 
到 客户 满意 。 


3, 后 期 一 一 维护 与 更 新 

网 站 建设 完成 交付 给 客户 后 ,还 涉及 后 期 维护 与 更 新 的 问题 ,由 于 网 站 维护 具有 专业 
性 和 长 期 性 ,这 些 维护 服务 应 在 前 期 策划 时 与 客户 商定 清楚 。 一 般 地 ,网 站 维护 与 更 新 主 
要 有 以 下 几 个 方面 需要 注意 。 

(1) 定期 检查 网 络 和 计算 机 的 工作 状态 ,对 网 站 运行 状况 进行 监控 ,发 现 问题 及 时 解 
决 。 在 保证 网 站 运行 状态 下 ,根据 客户 需要 对 网 页 网 站 内 容 进行 增加 、 删 除 和 修改 。 

(2) 维护 后 台数 据 库 的 正常 运行 ,并 及 时 备份 数据 库 内 容 。 

(3) 采取 有 效 的 安全 防范 措施 防止 黑客 入 侵 , 以 免 造 成 数据 损坏 、 泄 露 机 密 等 。 
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(4) 建立 系统 安全 管理 和 计算 机 使 用 管理 制度 。 


1.2.4 开发 与 调试 工具 
对 于 网 站 前 端 页 面 的 开发 来 说 ,常用 的 软件 主要 有 以 下 几 种 。 


1. 文本 编辑 器 

任何 一 种 文本 编辑 器 都 可 以 编写 HTML, 比 如 记事 本 、 写 字 板 和 Word 等 ,但 有 些 文 
本 编辑 器 (如 EditPlus、NotePad ++ 和 UltraEdit 等 ) 提 供 网 页 制作 及 程序 设计 等 许多 有 
用 的 功能 ,支持 HTML、CSS、PHP、ASP、C/C++ 、Java、JavaScript、VBScript 等 多 种 语法 
的 着 色 显 示 。 


2. Dreamweaver 

Dreamweaver 是 最 广泛 的 网 页 编辑 工具 之 一 , 它 采 用 多 种 先进 技术 ,能 够 快速 高 效 
地 创建 极 具 表现 力 和 动感 效果 的 网 页 ,使 网 页 创作 过 程 变 得 非常 简单 。 

3. Photoshop 

Photoshop 在 网 站 效果 设计 、 图 像 编 辑 、 婚 纱 摄影 等 各 领域 得 到 了 广泛 应 用 , 它 已 成 
为 许多 涉及 图 像 处 理 的 行业 的 事实 标准 。 此 外 ,除了 位 图 编辑 工具 Photoshop 之 外 ,还 有 
Illustrator\CorelDRAW , 博 硕 网 页 设计 师 等 其 他 第 三 方 工具 能 够 作为 辅助 工具 对 网 页 进 
行 设计 。 

4. Visual Studio 

Visual Studio 是 一 个 基本 完整 的 开发 工具 集 , 它 包括 整个 软件 生命 周期 中 所 需要 的 
大 部 分 工具 ,可 帮助 用 户 为 Microsoft 平台 和 其 他 平台 创建 各 种 各 样 的 应 用 程序 。 


5. 浏览 器 

不 同 的 浏览 器 对 HTML 5 的 支持 程度 不 同 , 这 就 造成 了 浏览 器 在 解析 HTML 文档 
后 ,页 面 显 示 的 效果 不 同 , 这 种 浏览 器 兼容 性 问题 是 网 页 前 端 开发 人 员 经 常 遇 到 的 且 必 须 
解决 的 问题 。 

在 为 桌面 浏览 器 做 HTML 5 应 用 开发 或 网 站 开发 的 过 程 中 ,综合 各 种 情况 ， 
这 里 推荐 使 用 谷歌 的 Chrome 浏览 器 和 360 安全 浏览 器 (所 用 内 核 与 Chrome 浏览 
器 相同 ) 。 

(1) Chrome 浏览 器 。Chrome 浏览 器 是 目前 HTML 5 支持 程度 最 高 的 浏览 器 ， 
在 学 习 HTML 5 和 CSS 3 过 程 中 ,为 了 能 预览 到 最 终 效 果 ,Chrome 浏览 器 是 最 好 的 
选择 。 

(2) 360 安全 浏览 器 。 目 前 ,对 HTML 5 支持 较 好 的 浏览 器 除了 Chrome 之 外 ,还 有 
Maxthon、Opera、360 安全 浏览 器 和 Firefox 等 。 此 外 , 某 些 浏览 器 还 为 开发 者 提供 插件 ， 
例如 ,360 安全 浏览 器 在 打开 任意 网 页 时 , 按 F12 键 , 即 可 进入 开发 人 员 模式 ,开发 者 可 以 
详细 查看 当前 页 面 的 HTML 文档 和 对 应 的 CSS 样式 ,如 图 1-14 所 示 。 
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1. 什么 是 Web 标准 ? 
2. 如 何 正确 理解 “表现 与 结构 相 分 离 ”? 
3 


.网 页 构成 的 元 素 包含 哪些 ?请 举例 说 明 。 
4. 访问 HTML 5 测试 网 站 (http://html 5test. com/) ,查看 当前 浏览 器 测试 后 的 


HTML 5 分 数 (分 数 越 高 说 明 对 HTML 5 的 支持 度 越 好 ) 。 
5. 网 站 设计 的 基本 原则 有 哪些 ? 
6， 概述 网 站 建设 的 基本 流程 。 


第 2 章 





HTML 语言 基础 


【本 章 导 读 】 

HTML 语言 是 网 页 制作 的 基础 , 它 对 后 期 网 页 制作 水 平 的 提高 有 重要 影响 。 本 章 从 
HTML 的 历史 沿革 谈 起 ,着 重 向 读者 介绍 HTML 5 的 文档 结构 及 其 常见 标签 的 含义 。 
对 于 初学 者 来 说 ,学 习 各 种 标签 可 能 非常 枯燥 ,但 这 是 成 为 Web 前 端 设计 师 的 必 经 阶段 。 

【学 习 目 标 】 

名 了 解 HTML 4.01 到 HTMIL 5 的 发 展 历史 ; 

名 掌握 HTML 5 的 文档 结构 和 编写 规范 ,并 熟知 其 与 (X)HTML 的 区 别 ; 

名 理解 HTML 5 中 常见 元 素 的 含义 ,并 重点 认 知 HTML 5 主体 结构 类 元 素 的 含义 ; 

名 能够 使 用 记事 本 编写 页 面 布局 简单 的 HTML 5 文档 。 


2.1 HTML 的 历史 沿革 


HTML 通过 标签 来 标记 要 显示 在 网 页 中 的 各 个 部 分 。 浏 览 器 在 解 
析 网 页 文件 时 ,根据 不 同 标签 来 解释 和 显示 其 标记 的 内 容 , 这 样 浏览 者 
才能 在 浏览 器 中 看 到 真实 的 网 页 。 


2.1.1 从 HTML 4.01 到 XHTML 


HTML 早 在 20 世纪 80 年 代 末 由 科学 家 带 姆 。 伯 纳 斯 . 李 创 建 ,后 来 [ETF( 互 联网 
工程 任务 组 ) 用 简化 的 SGML( 标 准 通用 置 标语 言 ) 进 一 步 发 展 HTML 并 成 为 国际 标准 ， 
最 后 由 万 维 网 联盟 (W3C) 维 护 。 

其 实 ,HTML 1.0 并 不 存在 ,HTML 发 布 的 第 一 个 官方 版 本 就 是 由 IETF 在 1995 年 
推出 的 HTML 2.0 版本。 随后 ,HTML 有 了 较 大 幅度 的 发 展 ,1996 年 推出 HTML 3.2 
版 本 ,1997 年 推出 HTML 4. 0 版 本 ,1999 年 推出 HTML 4. 01 版 本 。 随 着 HTML 的 发 
展 ,W3C 取代 IETF 的 角色 ,掌握 了 对 HTML 规范 的 控制 权 。 

在 快速 发 布 了 多 个 版 本 之 后 ,业界 普遍 认为 HTML 已 经 到 了 穷 途 末路 的 阶段 ,对 
Web 标准 的 焦点 也 开始 转移 到 了 XML 和 XHTML 上 。 


2.1.2 从 XHTML 到 HTML 5 








HTML 在 HTML 4. 01 之 后 的 第 一 个 修订 版 本 便 是 XHTML 1. 0, 这 里 X 代表 
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eXtensible, 即 “可 扩展 ”。 由 于 XHTML 1.0 是 基于 HTML 4.01 的 ,所 以 并 没有 引入 任 
何 新 标签 或 属性 ,唯一 区 别 就 是 语法 的 严谨 程度 , HTML 的 语法 要 求 比较 宽松 ,而 
XHTML 则 要 求 相对 严格 。 

从 本 质 上 讲 ,XHTML 是 一 种 过 渡 技 术 , 结 合 了 部 分 XML 的 强大 功能 及 大 多 数 
HTML 的 简单 特性 。 

2002 年 第 一 份 XHTML 2. 0 标准 草案 发 布 , 但 它 的 完成 度 很 低 , 而 且 此 后 的 工作 进 
展 迟 缓 ,所 以 在 2004 年 的 时 候 ,业界 联合 热心 的 投资 人 、 浏 览 器 厂商 、 网 页 设计 师 , 自 立 门 
户 成 立 了 名 为 WHATWG(Web HyperText Application Technology Working Group) 的 
组 织 , 并 致力 于 开发 HTML 5。 

2006 年 W3C 决定 停止 XHTML 的 工作 , 转 而 开始 与 WHATWG 合作 ,重新 介入 
HTML, 并 于 2008 年 发 布 了 HTML 5 的 工作 草案 。2012 年 7 月 W3C 和 WHATWG 已 
经 结束 其 联合 开发 的 标准 ,同年 W3C 发 布 了 首 个 nightly 草案 ,计划 在 2014 年 发 布 完整 
的 HTML 5 标准 。 

此 外 ,通过 对 主流 新 闻 的 观察 ,也 能 够 感受 到 HTML 5 正在 被 逐渐 重视 ,并 广泛 推广 
和 使 用 。 

(1) 2010 年 1 月 ,YouTube 提供 HTML 5 视频 播放 器 。 

(2) 2010 年 4 月 ,乔布斯 公开 封杀 Flash, 这 使 得 更 多 公司 开始 关注 HTML 5。 

(3) 2010 年 11 月 ,使 用 HTML 5 技术 的 Chrome Web Store 应 用 商店 发 布 。 

(4) 2011 年 5 月 ,迪士尼 收购 HTML 5 游戏 引擎 。 

(5) 2011 年 8 月 ,亚马逊 推出 采用 HTML 5 技术 的 云 阅读 器 。 

(6) 2011 年 11 月 ,Adobe 停止 为 移动 设备 开发 Flash 播放 器 , 转 而 专注 于 HTML 5 
工具 。 

(7) 2012 年 6 月 ,Linkedln 推出 基于 HTML 5 的 原生 态 iPad 应 用 。 

(8) 2013 年 1 月 ,市场 调研 机 构 Strategy Analytics 表示 ,全 球 市 场 拥 有 超过 10 亿 部 
支持 HTML 5 技术 的 手机 。 

通过 以 上 对 HTML 历史 发 展 的 了 解 , 基 本 上 可 以 让 人 放心 、 大 胆 地 使 用 HTML 5 了 。 


2.1.3 HTML 5 要 解决 的 问题 


HTML 5 技术 被 各 种 终端 .操作 系统 .厂商 广泛 支持 , 它 具 有 路 平台 特性 ,拥有 海量 
的 内 容 资 源 , 庞 大 的 开发 者 群体 ,被 公认 为 是 未 来 最 重要 的 应 用 开发 技术 之 一 。 目 前 ， 
HTML 5 要 解决 的 问题 主要 有 以 下 两 个 方面 。 

1. 文档 结构 方面 的 问题 

在 之 前 的 HTML 版 本 中 ,文档 的 结构 不 够 清晰 、 明 确 。 一 般 地 ,页 面 都 采用 div 元 
素 ,再 配合 id 属性 或 class 属性 进行 布局 ,但 对 于 搜索 引擎 或 屏幕 阅读 器 等 程序 来 说 ,过 
多 的 div 元 素 很 难 分 清楚 哪些 是 文章 的 正文 ,而 在 HTML 5 中 ,新 增 了 很 多 与 结构 相关 
的 元 素 , 能 够 解决 此 类 问题 。 
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2. Web 应 用 程序 功能 限制 方面 的 问题 


HTML 与 Web 应 用 程序 的 关系 十 分 薄弱 。Web 应 用 程序 的 特征 是 先 从 网 络 下 载 ， 
然后 忠实 运行 ,因此 应 该 对 会 威胁 到 用 户 安 全 的 功能 进行 限制 。 为 了 弥补 这 方面 的 不 足 ， 
HTML 5 已 经 开始 提供 各 种 各 样 Web 应 用 上 的 新 API, 各 浏览 器 也 在 快速 地 封装 着 这 些 
API, HTML 5 已 经 使 富 Web 应 用 的 实现 变 为 可 能 。 


2.2 文档 结构 


既然 网 页 的 本 质 是 利用 超 文本 置 标语 言 编辑 的 文档 内 容 , 那 么 从 结 
构 上 讲 , 就 应 该 符合 某 种 结构 形式 ,本 节 主 要 向 读者 介绍 HTML 5 的 文 
档 结构 。 为 了 更 好 地 理解 ,这 里 给 出 一 份 简单 的 HTML 5 文档 代码 。 
【案例 2-1】 HTML 5 文档 结构 。 








< !doctype html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title> HTML 5 文档 结构 < /title> 
< /head> 


<body> 
<header id= "page_header"> 这 里 是 页 面 头 部 区 域 < /header> 
<nav id= "page_nav"> 这 里 是 页 面 的 导航 部 分 < /nav> 
<section> 
<article> 
<hl> 文 章 的 标题 < /hl> 
<p> 这 里 是 文章 的 正文 < /p> 
</article> 
</section> 
<aside> 这 里 是 页 面 的 侧 边栏 < /aside> 
<footer id= "page footer"> 这 里 是 页 面 的 底部 区 域 < /footer> 
< /body> 
</html> 


为 了 让 读者 更 加 容易 地 理解 文档 结构 及 其 各 种 标签 的 含义 ,下 面 将 对 其 内 容 分 别 进 
行 讲解 。 另 外 ,由 于 Chrome 浏览 器 对 HTML 5 和 CSS 3 支持 程度 较 高 ,本 书 约定 所 有 
案例 均 采用 Chrome 浏览 器 进行 预览 和 调试 。 


2.2.1 标签 元素、 属性 和 值 





标签 名 称 
1. 什么 是 标签 ss 
HTML 标签 由 一 对 尖 括 号 “二 ”和 “ 汪 >” 以 及 标签 名 组 <footer> 文 字 内 容 </footer> 
成 。 标 签 分 为 “起 始 标签 "和 * 结 束 标 签 " 两 种 ,如 图 2-1 所 ， 
起 始 标签 结束 标签 


示 。 这 为 标签 5 示 签 ， 
示 。 这 里 footer 为 标签 名 称 , 到 footer 二 为 起 始 标 图 2.1 标签 
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二 /footer 祖 为 结束 标签 。 
网 页 中 每 个 标签 都 有 特定 的 描述 功能 ,HTML 文档 就 是 通过 不 同 功能 的 标签 来 控制 
Web 页 面 内 容 的 。 
2. 什么 是 元 素 
HTML 元 素 是 组 成 HTML 文档 的 最 基本 的 部 件 ,例如 ,在 案例 2-1 中 ,html、 head、 
header section hl 和 p 等 均 为 HTML 元 素 , 只 是 它们 的 功能 各 有 不 同 而 已 。 
按照 有 无 内 容 来 划分 ,可 以 分 为 “有 内 容 的 元 素 ” 和 *“ 空 元 素 ”; 按 照 元 素 排 列 状态 来 划 
分 ,可 以 分 为 “ 块 级 元 素 ” 和 “内 联 元 素 ”。 
块 级 元 素 是 从 一 个 新 行 开始 显示 的 ,其 后 面 的 元 素 也 需要 另 起 一 行进 行 显示 。 
例如 : 
<body> 
<p> (1)p 元 素 是 块 级 元 素 , 其 后 面 的 元 素 需 要 另 起 一 行进 行 显示 。< /p> 
<p> (2)p 元 素 是 块 级 元 素 ,其 后 面 的 元 素 需 要 另 起 一 行进 行 显示 。< /p> 
< /body> 
在 浏览 器 中 预览 的 效果 如 图 2-2 所 示 。 此 外 ,标题 ,列表 、 表 格 .div 和 body 等 元 素 都 
是 块 级 元 素 。 
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(1) p 元 素 是 块 级 元 素 ， 其 后 面 的 元 素 需要 另 起 一 行进 行 显示 。 
(2) p 元 素 是 块 级 元 素 ， 其 后 面 的 元 素 需要 另 起 一 行进 行 显示 。 





图 2-2 ” 块 级 元 素 p 的 网 页 预览 效果 


内 联 元 素 不 需要 另 起 一 行进 行 显示 ,其 后 面 的 元 素 也 不 需要 另 起 一 行进 行 显示 。 
例如 : 
<body> 
<a href= 只 "> (1)a 元 素 是 内 联 元 素 , 其 后 面 的 元 素 不 需要 另 起 一 行进 行 显示 。< /a> 


<a href=- "#"> (2)a 元 素 是 内 联 元 素 , 其 后 面 的 元 素 不 需要 另 起 一 行进 行 显示 。< /a> 
< /body> 


在 浏览 器 中 预览 的 效果 如 图 2-3 所 示 。 此 外 ,a、em、span 等 元 素 都 是 内 联 元 素 。 





所 3 CG | D file:///E:/ 配 套 网 站 /ch02/ 块 级 元 毒 .html 


5 元 素 是 内 联 元 素 ， 其 后 面 的 元 素 不 需要 另 起 一 行进 行 显示 。 a 元 素 是 内 联 元 素 ， 其 后 面 的 元 素 不 需要 刀 起 一 行进 行 显示 。 





图 2-3 内 联 元 素 a 的 网 页 预览 效果 
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3. 什么 是 属性 和 值 

在 各 种 元 素 的 起 始 标签 中 ,还 可 以 添加 一 个 或 多 个 “属性 ?来 表示 元 素 的 其 他 特性 , 属 
性 与 值 之 间 用 等 号 进行 连接 ,其 值 用 双 引 号 进行 标注 ,例如 ,在 案例 2-1 中 二 header 二 标 
签 内 部 包含 了 一 个 id 属性 ,该 属性 的 值 是 "page_header" 。 


2.2.2 DOCTYPE 声明 


DOCTYPE 是 document type( 文 档 类 型 ) 的 简写 ,在 Web 设计 中 用 来 说 明 当 前 的 
XHTML 或 HTML 是 什么 版 本 。 该 标签 必须 以 感叹 号 (1) 开 始 ,而且 要 放 在 文档 的 开始 
处 ,其 他 所 有 标签 之 前 。 要 建立 符合 标准 的 网 页 ,DOCTYPE 声明 是 必 不 可 少 的 关键 组 
成 部 分 ,否则 页 面 的 CSS 会 失效 或 半 失 效 , 也 就 是 说 如 果 没 有 这 个 DOCTYPE 声明 ,将 会 
导致 CSS 失效 ,特别 是 没有 声明 或 声明 不 正确 的 时 候 , 浏 览 器 则 会 认为 当前 页 面 有 些 “ 古 
怪 ”, 其 显示 内 容 将 不 再 正确 。 

以 下 是 HTML 5 的 DOCTYPE 声明 


< !doctype html> 
以 下 是 XHTML 的 DOCTYPE 声明 : 


< !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmL1/DTD/xhtml1l-transitional.dtd"> 


以 下 是 HTML 4.01 的 DOCTYPE 声明 : 


< !DOCTYPE HTML PUBLIC "~ //W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/htm14/loose.dtd"> 

通过 上 述 多 个 HTML 版 本 之 间 的 对 比 , 可 以 发 现 HTML 5 版 本 中 DOCTYPE 声明 
最 为 简洁 ,记忆 起 来 也 最 为 方便 。 


2.2.3 html 元 素 、head 元 素 与 body 元 素 


对 于 任何 网 页 文档 来 讲 ,基本 结构 元 素 都 主要 有 3 个 ,分 别 是 html 元 素 、head 元 素 
和 body 元 素 。 这 些 元 素 均 出 现在 每 个 网 页 上 ,而 且 只 能 出 现 一 次 。 

1. html 元 素 

html 元 素 是 包含 网 页 文件 最 外 围 的 一 对 标签 ,其 作用 是 告诉 浏览 器 整个 文件 是 
HTML 格式 ,并 且 从 二 html 二 开始 ,至 二 /html 二 结束 。 


2. head 元 素 

head 元 素 内 部 包含 的 是 网 页 的 头 部 信息 ,这 些 信息 不 会 作为 内 容 显 示 在 网 页 正文 
中 ,而 是 为 浏览 器 提供 信息 。head 元 素 中 可 以 包含 以 下 元 素 。 

(1) title 元素 : 一 title 之 标签 的 内 容 将 出 现在 浏览 器 的 左上 角 。 其 目的 在 于 告诉 访 
问 者 本 网 站 的 主题 。 
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pa (2) meta 元 素 : 过 meta 一 标签 内 部 不 包含 任何 内 容 , 其 属性 定义 了 与 文档 相关 的 值 ， 
这 些 信息 常 被 搜索 引擎 用 于 检索 网 页 。 
(3) link 元 素 : 过 link 盖 标签 的 内 容 用 于 链接 外 部 CSS 和 JavaScript 等 文件 。 
(4) style 元 素 : 在 二 style 二 标签 内 部 可 以 书写 作用 于 本 页 面 的 CSS 规 则 。 


3. body 元 素 

body 元 素 为 文件 主题 内 容 最 上 层 元 素 , 页 面 中 所 有 元 素 均 应 放置 其 中 。 
【案例 2-2】 文档 的 基本 结构 。 

Q@ 打开 记事 本 ,并 在 其 中 输入 以 下 代码 。 


< !doctype html> 
<html> 
<head> 
<meta charset= "utf- 8" name="keywords" content= "这 里 是 网 站 的 关键 字 "> 
<meta name= "description" content=" 这 里 是 网 站 的 描述 "> 
<title> 认 知 文档 的 基本 结构 < /title> 
<style type= "text/css"> 
body { 
color: blue; 
} 
</style> 
< /head> 
<body> 
页 面 中 所 有 字体 均 为 蓝 色 ! 
< /body> 
</html> 


@ 执行 记事 本 菜单 栏 中 的 “文件 ”一 “另存 - 
站 in 文 档 的 基本 结构 x 

为 "命令 ,在 弹出 的 对 话 框 中 输入 准备 保存 的 网 | 。， C | 中 广 的 基本 结构 .html9| 三 
页 文件 名 ,如 “2-2 认 知 文档 的 基本 结构 . html”。 页 面 中 所 有 字体 均 为 蔓 色 1 

@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ,显示 
效果 如 图 2-4 所 示 。 

通过 本 例 可 知 ,二 title 二 标签 的 内 容 出 现在 图 2-4 案例 2-2 的 预览 效果 
浏览 器 的 左上 角 ; 二 meta 二 标签 的 内 容 没 有 显示 
在 页 面 中 ;二 style 二 标签 内 部 的 规则 作用 于 本 页 面 ,使 得 所 有 网 页 文字 变 为 蓝 色 。 








2.3 HTML 5 中 常见 的 元 素 


HTML 元 素 有 很 多 ,在 不 断 的 发 展 过 程 中 , 某 些 元 素 可 能 会 被 取消 ,也 可 能 新 增 一 些 
元 素 。 本 节 对 工作 中 经 常 使 用 的 元 素 加 以 介绍 。 


2.3.1 块 级 元 素 
1. 标题 类 元 素 


标题 类 元 素 主 要 有 hl、h2、h3、h4、h5 和 h6。 这 里 *h” 是 header 单 
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沿 国 





词 的 第 一 个 字母 ,数字 1 一 6 代表 标题 的 级 别 ,hl 代表 顶级 的 标题 ,字号 


最 大 ;h6 标题 级 别 最 小 ,字号 最 小 。 
【案例 2-3】 标题 类 元 素 。 
Q@ 打开 记事 本 ,并 输入 以 下 代码 。 


< !doctype html> 

<html> 

<head> 
<meta charset= "utf- 8"> 
<title> 标 题 类 元 素 < /title> 

< /head> 

<body> 
<hl> 我 是 一 级 标题 < /hl> 
<h2> 我 是 二 级 标题 < /h2> 
<h3> 我 是 三 级 标题 < /h3> 
<h4> 我 是 四 级 标题 < /h4> 
<h5> 我 是 五 级 标题 < /h5> 
<h6> 我 是 六 级 标题 < /h6> 

</body> 

</html> 


@ 执行 记事 本 菜单 栏 中 的 “文件 ”一 “另存 为 "命令 ,在 弹出 的 对 话 框 中 输入 准备 保存 


的 网 页 文件 名 ,如 “2-3 标题 类 元 素 . html”。 

@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ,显示 效果 
如 图 2-5 所 示 。 

需要 说 明 的 是 ,虽然 各 级 标题 字号 大 小 不 同 , 但 可 
以 通过 CSS 规则 进行 修改 ,并 不 是 一 成 不 变 的 。 

2. 段落 元 素 

p 元 素 是 最 常用 的 段落 元 素 。 为 使 网 页 正文 文字 
段落 排列 更 加 整齐 ,段落 之 间 使 用 二 p 记 和 二 /p 二 标签 
定义 段落 ,但 并 非 所 有 内 容 都 要 放 到 二 p 二 标签 中 。 

【案例 2-4】 段落 元 素 。 

Q@ 打开 记事 本 ,并 在 其 中 输入 以 下 代码 。 

< !doctype html> 

<html> 

<head> 

<meta charset= "utf- 8"> 


<title> 段 落 元 素 < /title> 
</head> 





我 是 一 级 标题 
我 是 二 级 标题 


我 是 三 级 标题 
我 是 四 级 标题 
我 是 五 级 标 是 


我 是 六 级 标题 


图 2-5 ”标题 类 元 素 网 页 效果 


~ 


pe 
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| <body> 
<h2> 八 阵 图 < /h2> 
<p> 功 盖 三 分 国 ,< /p> 
<p> 名 成 八 阵 图 。< /p> 
<p> 江 流 石 不 转 ,< /p> 
<p> 遗 恨 失 知 吴 。< /p> 
<p> 作 品 赏 析 : 作 者 赞颂 了 诸葛 亮 的 丰功伟绩 ,尤其 称颂 他 在 军事 上 的 才能 和 建树 。 在 内 容 
上 ,既是 怀古 ,又 是 抒怀 , 情 中 有 情 , 言 外 有 意 , 在 绝句 中 别具一格 。< /p> 
< /body> 
</html> 


@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ,显示 效果 如 图 2-6 所 示 。 
@ 再 次 用 记事 本 打开 网 页 ,将 诗词 主体 代码 进行 修改 ,修改 内 容 如 下 。 


<p> 功 盖 三 分 国 ,<br/> 
名 成 八 阵 图 。<br/> 
江 流 石 不 转 ,<br/> 
遗 恨 失 知 吴 。<br/> 
</p> 


@ 保存 后 刷新 浏览 器 ,显示 效果 如 图 2-7 所 示 。 


中 段 苇 元 素 
和 CIDfile//E/ 编 S 交 | 三 





八 阵 图 
功 盖 三 分 国 ， 
名 成 八 阵 图 。 


江 流 石 不 转 ， 
作品 赏析 ， 作 者 鞠 颁 了 诸 区 亮 的 丰 功 

遗 恨 失 知 吴 。 仿 汪 克基 称 人 他 在 宇 事 上 的 才 通 和 

人 可 作 训 入 了 这 部 和 本 

作品 江 析 ,人 必 守 铂 名 开 计 六 训 的 寺 区 全 全 中 有 本 ， 和 外 有 总， 在 弗 中 

和 上 ， 取 是 怀 吉 ， 又 是 反 

全 入 中 有 檬 ， 和 外 有 总 ,在 绝 中 





图 2-6 段落 元 素 p 网 页 效果 图 2-7 修改 后 的 网 页 效果 


从 本 例 预览 的 不 同 效果 可 以 看 出 ,p 元 素 是 段落 元 素 , 使 用 该 标签 分 割 诗 词 内 容 时 会 
产生 较 大 的 行距 ,这 是 因为 浏览 器 将 诗词 的 每 行当 作 有 段落 处 理 , 而 段落 本 身 存 在 段 前 、 自 
后 距离 ,所 以 显示 较 大 行距 ,而 增加 一 br/ 二 标签 后 行 间距 恢复 正常 ,间接 说 明 换行 符 
一 br/ 二 标签 的 作用 。 

2.3.2 内 联 元 素 


之 前 已 经 介绍 过 ,内 联 元 素 与 块 元 素 最 大 的 区 别 在 于 其 前 后 的 元 素 能 够 保持 在 同一 
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行 之 中 。 在 实际 工作 中 ,常见 的 内 联 元 素 有 img( 图 像 ) 元 素 .a( 超 链接 ) 元 素 和 span( 通 用 
行 ) 元 素 等 
1. img 元 素 


img 元 素 可 以 向 网 页 中 嵌入 一 幅 图 像 , 二 img 二 标签 创建 的 是 被 引用 图 像 的 占 位 空 
间 。 二 img 二 标签 除了 可 以 包含 HTML 的 通用 属性 以 外 ,还 必须 包含 两 个 属性 : src 属性 
和 alt 属性 。 

【案例 2-5】 img 元 素 。 

Q@ 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,主要 的 代码 片段 如 下 。 


<body> 
<img src= "2- 5.png" width= "205" height= "205" alt= "HTML 5" title= "HTML 5"> 
< /body> 
@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ,显示 效果 n 
如 图 2-8 所 示 。 € 了 GDfile/W/E:/ 编 s 灾 | 三 
人 src 属性 .alt 属性 和 title 属性 的 HTML 


(1) src 属性 。src 属性 用 于 指明 图 像 文件 所 在 的 


位 置 , 它 的 值 是 图 像 文 件 的 URL, 也 就 是 引用 该 图 像 的 
文件 的 绝对 路 径 或 相对 路 径 。 


(2) alt 属性 。alt 属性 用 于 指定 在 图 像 无 法 显示 
时 的 代替 文 本 。 这 里 建议 在 网 页 制作 时 为 每 个 图 像 添 
加 该 属性 ,这 样 即使 图 像 无 法 显示 ,用 户 还 可 以 看 到 未 
显示 的 图 像 信息 。 此 外 , 当 用 户 将 鼠标 指针 移动 到 该 
图 像 上 方 时 ,浏览 器 同样 会 在 一 个 文本 框 中 显示 这 个 描述 性 文本 。 

(3) title 属性 。title 属性 用 于 规定 元 素 的 额外 信息 。 某 些 浏览 器 对 alt 属性 并 不 支 
持 , 当 出 现 此 种 情况 时 ,需要 使 用 title 属性 代替 alt 属性 实现 同样 的 效果 。 

2. a 元 素 

通过 二 a 二 标签 的 href 属性 可 以 在 网 页 中 定义 链接 ,主要 分 为 普通 网 页 链接 、 电 子 邮 
件 链接 和 锚 链 接 。 

【案例 2-6】 a 元 素 。 

Q@ 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,主要 的 代码 片段 如 下 。 





图 2-8 img 元 素 网 页 效果 


<body> 
<p><a href- "/index.html"> 单 击 这 里 < /a> 将 指向 本 网 站 中 的 一 个 页 面 的 链接 < /p> 
<p><a href= "mailto:wuyuze@ 126.com"> 单 击 这 里 < /a> 
将 打开 默认 的 outlook Express< /p> 
<p><a href="https://www.alipay.com/"> 单 击 这 里 </a> 将 打开 互联 网 上 的 某 个 页 面 < /p> 
<p><a href- " 哩 bottom"> 单 击 这 里 < /a> 将 指向 本 页 面 中 的 一 个 锚 链接 < /p> 
<p><a name= "bottom" id= "bottom">< /a> 这 里 设置 了 一 个 名 为 bottam 的 锚 记 < /p> 
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< /body> 


@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ,显示 效果 如 图 2-9 所 示 , 读 者 可 以 单 击 其 中 
的 链接 加 以 测试 。 

本 例 中 所 包含 的 多 种 链接 的 含义 如 下 。 

(1) 内 部 链接 : 这 种 链接 的 目标 是 本 站 点 | 多 CD eV/E/ 闹 移交 | 三 
中 的 其 他 文档 。 利 用 这 种 链接 ,可 以 在 本 站 点 | 单机 这 里 将 指向 本 网 站 中 的 一 个 页 面 的 链接 
内 的 页 面 中 相互 跳 转 。 单 击 这 里 将 打开 默认 的 Outlook Express 

(2) 电子 邮件 链接 : 这 种 链接 可 以 启动 电 | 单 击 这 里 将 打开 互联 网 上 的 某 个 页 面 
子 邮 件 程序 书写 邮件 ,并 发 送 到 指定 地 址 。 单 击 这 里 将 指向 本 页 面 中 的 一 个 锚 链 接 

(3) 外 部 链接 : 这 种 链接 目标 是 互联 网 中 | 这 里 设置 了 一 个 名 为 bottom 的 错 记 
的 某 个 页 面 。 利 用 这 种 链接 ,可 以 跳 转 到 其 他 
的 网 站 上 。 2-9 a 元 素 网 页 效果 

(4) 锚 链 接 : 这 种 链接 的 目标 是 文档 中 的 
命名 锚 记 。 利 用 这 种 链接 ,可 以 跳 转 到 当前 文档 或 其 他 文档 的 某 一 指定 位 置 。 

需要 说 明 的 是 ,href 属性 如 果 是 外 部 链接 , 则 网 址 前 面 必须 增加 “http://”"。 另 外 , 超 
链接 的 外 观 样式 和 颜色 均 可 以 通过 CSS 中 的 伪 类 进行 美化 ,后 续 章 节 将 会 详细 讲解 。 


3. span 元 素 

span 元 素 经 常 被 用 于 网 页 的 文字 格式 排版 中 ,该 元 素 没 有 固定 的 格式 表现 ,只 有 对 
它 应 用 样式 , 才 会 产生 视觉 上 的 变化 。 

【案例 2-7】 span 元 素 。 

@ 打开 记事 本 ,并 输入 以 下 代码 。 

< ldoctype html> 


<html> 
<head> 








<meta charset= "utf- 8"> 
<title> span 元素 < /title> 
< style type= "text/css"> 
Pp span { 
color: #F00; 
font- size: 30px; 
}* 此 处 对 <p> 标 签 中 的 < span> 标 签 定义 样式 x* / 
</style> 
< /head> 
<body> 
<span> 此 处 的 文字 虽然 被 < span> 标 签 包 训 ,但 没有 对 应 的 样式 ,所 以 看 起 来 与 其 他 文字 
一 模 一 样 。< /span> 
<p>< span> 注 意 :< /span> 此 处 “注意 ”二 字 由 于 被 < span> 标 签 包 于 ,并 且 有 对 应 的 样式 ， 
故 呈 现 出 红色 , 且 字号 变 大 。< /p> 
</body> 
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</html> 


@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ,显示 效果 如 图 2-10 所 示 。 


癌 span 元 素 
言 CG 日 file/WE:/ 编 写 书籍 汇总 /2 交 三 


此 处 的 文字 虽然 被 < span> 标 签 包裹 ， 人 有 对 应 的 
样式 ， 所 以 看 起 来 与 其 他 文字 一 模 一 样 





注意 局 \; 此 处 “注意 ”二 字 由 于 被 <span> 标签 
要、 并 有 有 对 的 样式 故 呈 现 出 红色 ， 且 字 
与 及 六 。 





图 2-10 ”span 元素 网 页 效果 


2.3.3 列表 类 元 素 


HTML 中 常见 的 列表 类 元 素 有 ul 有 ol 元 素 ( 有 序 
列表 ) .dl 元 素 ( 自 定义 列表 ) 和 上 i 元 素 (列表 项 )。 这 些 元 素 结合 后 面 学 
习 的 CSS 能 够 实现 导航 栏 新 闻 列 表 等 页 面 效 果 , 使 用 范围 非常 广泛 。 


1. ul 元 素 

无 序列 表 ul 元素 所 包含 的 列表 项 将 以 粗 点 方式 显示 , 且 没 有 特定 的 顺序 。 在 实际 工 
作 中 ,经 常 使 用 ul 元 素 和 上 i 元 素 制作 导航 栏 。 

【案例 2-8】 ul 元素 。 

Q@ 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,主要 的 代码 片段 如 下 。 


<body> 

<h3>ul 元素 </h3> 

<ul> 
<1i><a href= 叶 "> 我 的 主页 < /a>< /li> 
<1i><a href= 哇 "> 最 新 电影 </a>< /li> 
<1li><a href= 叶 "> 小 说 大 全 </a></1li> 
<1i><a href= 哇 "> 旅游 度假 < /a>< /1i> 
<1i><a href= 叶 "> 今日 团购 < /a>< /li> 





<1i><a href= 哇 "> 品牌 特卖 </a>< /1i> 二 CG DD file:///E:/ 编 s 光 | 三 
</ul> 
< /body> ul 元 素 


@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ,显示 效果 
如 图 2-11 所 示 。 

从 本 例 可 以 看 出 ,浏览 器 在 对 无 序列 表 进 行 解析 
时 ,由 于 列表 项 1i 元 素 的 存在 ,会 自动 添加 一 个 项 目 符 
号 ,并 且 缩 进 一 定 的 距离 。 需 要 注意 的 是 ,1i 元 素 仅 能 
作为 列表 条 目 包含 于 无 序列 表 和 有 序列 表 之 中 ,不 能 。 图 2-11 叫 元 素 网 页 效果 
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4 单独 使 用 。 
此 外 ,默认 状态 下 列表 的 项 目 是 纵向 排列 的 ,如 果 需 要 横向 排列 形成 网 站 的 导航 栏 ， 
则 需要 使 用 CSS 的 浮动 属性 ,后 续 章节 将 会 详细 讲解 。 
2. ol 元 素 
有 序列 表 ol 元 素 同 无 序列 表 类 似 , 只 不 过 所 包含 的 列表 项 将 以 数字 顺序 方式 显示 。 
【案例 2-9】 ol 元 素 。 
Q@ 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,主要 的 代码 片段 如 下 。 


<body> 
<h3>ol 元 素 < /h3> 
<ul> 
<1i> 网 络 类 
<ol> 
<1i>《 网 页 设计 与 制作 》< /1i> 
<1i>《 网 络 工程 < /1i> 
</ol> 
</li> 
<1i> 多 媒体 类 
<ol> 
<1i>《Illustrator CS6 设 计 与 制作 》< /1i> 
<1i>《Photoshop CS6 图 像 处 理 技术 》< /1i> 
</ol> 
</li> 
</ul> 
< /body> 


@ 保存 为 网 页 文件 后 通过 浏览 器 解析 , 显 
示 效 果 如 图 2-12 所 示 。 .二 
本 例 中 使 用 了 列表 的 相互 谋 套 ,ol 元 素 被 二 2 和 让 > 
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ol 元 素 





岩 套 在 u 元 素 的 某 个 列表 项 中 。 此 外 ,ol 元 素 | 3 
内 的 列表 项 自动 从 1 开始 对 有 序 条 目 进行 编 人 
号 ,而 不 是 项 目 符号 。 

3. dl 元 素 图 2-12 ol 元 素 网 页 效果 


自 定义 列表 不 仅仅 是 一 列 项 目 , 还 是 项 目 
及 其 注释 的 组 合 。 自 定义 列表 以 二 dl 二 标签 开始 ,其 中 每 个 自 定义 列表 项 以 二 dt 二 开始 ， 
每 个 注释 以 天 dd 开始 。 
【案例 2-10】 dl 元 素 。 
@ 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,主要 的 代码 片段 如 下 。 
<body> 
<h3> dl 元 素 </h3> 
<dl> 
<dt> 无 序列 表 < /dt> 
<qd> 无 序列 表 是 一 个 项 目的 列表 ,此 列 项 目 使 用 粗 体 圆 点 典型 的 小 黑 圆 图) 进行 标记 。< /do> 
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<dt> 有 序列 表 < /at> 


<qd> 有 序列 表 也 是 一 列 项 目 ,列表 项 目 使 用 数字 进行 标记 。< /dd> 

<dt> 自 定义 列表 < /dt> 

<qd> 自 定义 列表 不 仅仅 是 一 列 项 目 ,还 是 项 目 及 其 注释 的 组 合 。< /ad> 
</dl> 
< /body> 


@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ,显示 效果 
如 图 2-13 所 示 。 
本 例 中 ,在 二 dl 二 .二 dt> 和 二 dd 记 三 个 标签 组 合 | 元素 


,二 dt 二 是 标题 ,二 dd 二 是 内 容 , 一 dl 二 可 以 看 作 无 序列 表 
中 ,二 dt 二 是 标题 是 内 容 可 以 看 作 承 人 的 列 实 让 


全 CG DY2-10%20d 元 次 | 三 





载 它们 的 容器 , 当 出 现 很 多 组 的 时 候 尽量 使 用 一 个 有 
和 标记 

二 dt 标签 配合 一 个 二 dd > 标签 的 方法 。 如 果 有 

dd 标签 中 内 容 很 多 ,可 以 说 套 <p 标 答 使 用 。 。 |。 

2.3.4 ”表格 类 元 素 3 





HTML 中 常见 的 表格 元 素 有 table( 表 格 ) 元 素 
tr( 表 格 行 ) 元 素 .th( 表 头 ) 元 素 和 td( 单 元 格 ) 元 素 ,这 图 2-13 吉 元 素 网 页 效果 
些 元 素 组 成 了 表格 的 基本 结构 。 

可 以 将 其 他 元 素 放 入 表格 中 ,如 图 像 . 表 单 ,甚至 另 一 个 表格 。“ 表 国 
格 ”在 页 面 中 的 作用 仅 是 数据 存储 ,并 且 让 数据 看 起 来 更 有 条 理 , 不 再 承担 
页 面 布局 的 任务 。 

【案例 2-11】 表格 类 元 素 。 

Q@ 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,主要 的 代码 片段 如 下 。 





<body> 
<table width= "300" border= "1"> 
<caption> 
华为 荣光 刷机 ROM 下 载 列 表 
< /caption> 
<tr> 
<th scope= "col"> 序 号 < /th> 
<th scope= "col"> 适 用 机 型 < /th> 
<th scope= "col"> 下 载 </th> 
< /tr> 
<tr> 
<td> 1l< /td> 
<td> 荣 耀 3c 联通 版 < /td> 
<td><a href= 叶 "> 下 载 </a></td> 
</tr> 
<tr> 
<td>2< /td> 
<td> 荣 耀 3D 移 动 版 < /td> 
<td><a hre 全 啡 "> 下 载 </a></td> 
</tr> 


/ 
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</table> 
< /body> 
@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ,显示 
效果 如 图 2-14 所 示 。 全 会 C | 口 %20 表 格 类 元 素 .html 灾 | 三 
本 例 中 ,除了 组 建 表格 的 基本 元 素 外 还 有 其 华为 荣耀 刷机 RON 下 载 列表 
本 适用 机 型 下 载 
rs Ms 医 归 元 联 甬 版 王强 
(1) border 属性 。border 属性 用 于 规定 表格 医 诅 50 移动 版 FE 












































边框 的 宽度 ,该 属性 是 可 选 属性 ,默认 情况 下 是 没 
有 边框 的 。 本 例 中 border 属性 设置 为 10, 表 示 在 图 2-14 表格 类 元 素 网 页 效果 
整个 表格 外 环绕 10 像素 宽度 的 边框 。 

(2) caption 元 素 。caption 元 素 用 于 定义 表格 的 标题 。 志 caption 之 标签 必须 紧 随 
二 table 二 标签 之 后 , 且 只 能 对 每 个 表格 定义 一 个 标题 。 

(3) scope 属性 。scope 属性 可 以 将 数据 单元 格 与 表 头 单元 格 联系 起 来 。 指 定 属性 值 
为 "row" 时 ,会 将 当前 行 的 所 有 单元 格 和 表 头 单元 格 联系 起 来 ;指定 属性 值 为 "col" 时 ,会 
将 当前 列 的 所 有 单元 格 和 表 头 单元 格 联系 起 来 。 


2.3.5 表单 类 元 素 


表单 元 素 form 能 够 收集 用 户 输入 的 信息 ,然后 将 这 些 信息 传送 到 它 的 action 属性 所 
表示 的 程序 中 进行 处 理 , 最 后 生成 个 性 化 的 回应 ,在 电子 商务 网 站 应 用 方面 ,表单 具有 无 
限 的 潜能 。 

除了 传统 的 一 input type 一 "button" 二 (普通 按钮 )、 一 input type 一 "checkbox" 二 ( 复 
选 框 ) 一 input type 王 "text" 二 (单行 文本 框 ) 一 input type 王 "password" 二 (密码 输入 框 ) 
和 二 input type 王 "submit" 二 (提交 按钮 ) 外 ,还 有 二 input type="email" 二 电子 邮件 输入 
域 . 一 input type 一 "tel" 二 电话 号 码 输入 域 . 一 input type 一 "range" 二 滑 块 和 一 input type 一 
"date" 过 日 期 选择 域 等 。 在 HTML 5 中 新 增 了 几 种 输入 类 型 ,开发 者 可 以 更 为 精确 地 描 
述 用 户 输 入 数据 的 类 型 。 浏 览 器 能 够 基于 这 些 新 的 表单 域 类 型 为 用 户 泻 染 出 效果 更 好 的 
控件 ,而 且 这 个 过 程 不 需要 编写 任何 JavaScript 代码 。 

下 面 来 制作 一 个 简单 的 例子 ,对 表单 中 的 一 些 常见 的 标签 进行 讲解 ,看 一 看 表单 是 如 
何 整 合 在 一 起 的 。 

【案例 2-12】 表单 类 元 素 。 

@ 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,主要 的 代码 片段 如 下 。 

<body> 

<h2> 用 户 注册 < /h2> 

< form id= "wf 1" method- "post" action="/example/form action 1.asp"> 

<div> 

<label for= "usename"> 姓 名 :< /label> 

< input typer "text" name= "usename" id- "usename" size="20" maxlength="40"/> 
</div> 
<div> 


<label for="passwozd"> 密 码 :</Label> 
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<input type="password" name="password" id="password" size="20" 


maxlength="40"/> 
</div> 
<div> 性 别 : 


<input type="radio" name="sex" value="M" id="male" /> 


<label for="male"> 男 </1label> 


<input type="radio" name="sex" value="F" id="female" /> 


<label for="female"> 女 </label> 
</div> 
<div> 学 历 : 


<select name="degree" id="degree"> 


<option value="college"> 大 专 </option> 
<option value= "undergraduate"> 本 科 < /option> 
<option value= "master"> 硕 十 研究 生 < /option> 
<option value="Dr"> 博 十 研究 生 < /option> 


</select> 
</div> 
</form> 


此 处 <form> 标 签 中 没有 内 容 


<form id="wf 2" method="post" action="/example/form action 2.asp"></form> 


<div> 备 注 : 


<textarea form="wf 2" name="note" cols="30" rows="5"></textarea> 


</div> 
<div> 


新 增 的 form 属 性 


<input form="wf 2" type="submit" name="button 1" id="button 1" value=" 提 交 " /> 


</div> 

</body> 

@ 保存 为 网 页 文件 后 通过 浏览 器 解析 ,显示 
效果 如 图 2-15 所 示 。 

本 例 中 需要 掌握 的 知识 点 有 以 下 几 个 方面 。 

1. 过 form 之 标签 

到 form 之 标签 用 于 为 用 户 输入 创建 HTML 
表单 。 在 文档 主体 中 ,表单 可 以 被 放置 于 任何 
位 置 。 

1) form 属性 

form 属性 是 HTML 5 的 新 增 属性 。 在 HTML 
4. 01 中 表单 内 的 从 属 元 素 必 须 书 写 在 所 form> 与 
去 /form> 之 间 , 但 在 HTML 5 中 ,可 以 把 它们 书写 
在 任何 地 方 , 只 须 为 该 元 素 指定 form 属性 ,属性 值 
与 该 表单 的 id 属性 值 相 对 应 即 可 。 
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用 户 注册 
姓名 
密码 ， 
性 别 : 


学 历 ， 


图 2-15 表单 类 元 素 网 页 效果 


例如 ,二 form id 一 "wf_2"”method 一 "post”action 一 "/example/form_action_2. asp"> 
二 /form 二 中 并 没有 任何 从 属 元 素 ,. 但 是 其 外 部 有 元 textarea form 一 "wf_2"”name 一 
"note" cols 一 "30" rows 一 "5" 二 二 /textarea 二 ,这 就 说 明 该 textarea 元 素 从 属 wf_2 


有 
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表单 。 

2) action 属性 

action 属性 说 明了 接收 和 处 理 表单 数据 的 应 用 程序 的 URL。 本 例 中 action 属性 值 
为 "/example/form_action_1. asp" ,这 表示 该 表单 提交 后 ,将 调用 form_action_1. asp 程序 
进行 处 理 。 

3) method 属性 

method 属性 用 于 规定 使 用 何 种 方法 发 送 表单 数据 ,共有 POST 和 GET 两 种 方法 。 

4) label 元 素 

label 元 素 的 作用 是 , 当 用 户 选择 该 标签 时 ,浏览 器 就 会 自动 将 焦点 转 到 和 标签 相关 
的 表单 控件 上 。 例 如 ,在 网 页 中 单 击 * 姓 名 ”, 光 标 就 会 自动 在 其 右 侧 文本 框 中 定位 ,这 是 
因为 label 元 素 内 的 for= "usename" 与 input 元 素 内 的 id 二 "usename" 相 对 应 。 

5) select 元 素 

select 元 素 用 于 创建 下 拉 菜 单 或 滚动 列表 。 与 其 他 标签 一 样 ,name 属性 是 必须 存在 
的 。 当 提交 表单 时 ,浏览 器 会 提交 选 定 的 项 目 , 或 者 收集 用 逗号 分 隔 的 多 个 选项 ,将 其 合 
成 一 个 单独 的 参数 列表 。 

6) option 元 素 

可 以 定义 一 个 二 select 二 表单 控件 中 的 条 目 。 浏 览 器 将 二 option 二 标签 中 的 内 容 作 
为 二 select 二 标签 的 菜单 或 是 深 动 列表 中 的 一 个 元 素 进行 显示 。 


2. 过 input 之 标签 

过 input 二 标签 用 于 定义 表单 控件 ,根据 其 不 同 type 的 属性 值 ,输入 的 字段 可 以 拥有 
很 多 种 形式 。 在 HTML 5 中 ,input 元 素 的 种 类 有 了 大 幅度 改良 ,可 以 实现 之 前 那些 需要 
使 用 JavaScript 才能 实现 的 功能 。 

对 于 每 个 元 素来 说 ,只 有 type 和 name 属性 是 必需 的 ,一 input 二 标签 中 type 属性 用 
来 选择 控件 类 型 ,name 属性 用 来 为 字段 命名 。 以 下 是 type 属性 常见 值 的 含义 。 

(1) type 二 "text"( 单 行文 本 框 )。 文 本 框 是 一 种 让 访问 者 自己 输入 内 容 的 表单 对 象 ， 
通常 用 来 填写 用 户 名 以 及 简单 的 回答 ,如 图 2-16 所 示 。 

(2) type 二 "password"( 密 码 框 )。 当 用 户 在 此 类 型 的 输入 框 中 输入 任何 文字 时 , 文 
字 会 被 *。” 代 替 , 从 而 起 到 保密 的 作用 ,如 图 2-17 所 示 。 


Dinputte 素 x 
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这 里 可 以 输入 文字 ! 




















图 2-16 单行 文本 输入 框 图 2-17 密码 框 
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(3) type 一 "checkbox"( 复 选 框 )。 复 选 框 控件 为 用 户 提 供 了 一 种 在 表单 中 选择 或 取 
消 选择 某 个 条 目的 快捷 方法 。 复 选 框 可 以 集中 在 一 起 产生 一 组 选择 ,用 户 可 以 选择 或 取 
消 选择 组 中 的 每 个 选项 ,如 图 2-18 所 示 。 

(4) type 一 "radio"( 单 选 按钮 )。 单 选 按钮 表单 控件 与 复 选 框 的 行为 非常 相似 ,唯一 
不 同 的 是 浏览 者 在 待 选项 中 只 能 选择 其 中 一 个 ,如 图 2-19 所 示 。 
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图 2-18 复 选 框 图 2-19 单 选 按钮 


(5) type 一 "file"( 文 件 域 ) 。 文 件 域 主要 用 于 文件 的 上 传 ,如 图 2-20 所 示 。 

(6) type 一 "submit"( 提 交 按 钮 )。 表 单 中 input 元 素 的 type 属性 可 以 定义 为 提交 按 
钮 (submit) ,并 且 允 许 一 个 表单 中 包含 多 个 提交 按钮 , 它 的 作用 就 是 把 表单 数据 发 送 到 服 
务 器 ,如 图 2-21 所 示 。 
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图 2-20 文件 域 图 2-21 提交 按钮 





对 于 最 简单 的 提交 按钮 (按钮 不 包含 name 属性 或 value 属性 ) ,浏览 器 将 显示 一 个 长 
方形 按钮 ,上 面 有 默认 标记 “提交 ”。 其 他 情况 下 ,浏览 器 会 在 value 属性 中 设置 的 文本 来 
标记 按钮 。 如 果 还 包含 name 属性 , 当 浏 览 器 将 表单 信息 发 送 给 服务 器 时 ,会 将 提交 按钮 
的 value 属性 值 添加 到 参数 列表 中 。 

(7) type 二 "hidden" (隐藏 字段 )。 隐 藏 字段 控件 从 视觉 上 是 无 法 看 到 的 , 它 只 是 一 种 
向 表单 中 嵌入 信息 的 方法 ,以 便 这 些 信 息 不 会 被 浏览 器 忽略 。 虽 然 该 控件 不 会 显示 出 来 ， 
但 通过 查看 源 代码 还 是 可 以 看 到 该 属性 的 值 ,因此 不 要 使 用 该 元 素 传递 敏感 信息 ,比如 
密码 。 

(8) type 一 "date"( 日 期 控件 ) 。 日 期 控件 可 以 帮助 用 户 快速 输入 各 类 日 期 ,其 使 用 方 
法 如 下 。 





< input name= "date" type= "date" value= "2015- 05- 17"> 


这 里 可 以 通过 value 属性 设置 日 期 控件 的 默认 起 始 日 期 ,预览 效果 如 图 2-22 所 示 。 
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pi 


(9) type 一 "range"( 滑 块 控件 )。 滑 块 控件 可 以 方便 用 户 快速 且 直 观 地 增 减 数值 ,其 
使 用 方法 如 下 。 


< input name= "range" type= "range" min= "5" max= "30" value= "5"> 


这 里 min 二 "5" 是 最 小 值 ,max 二 "30" 是 最 大 值 ,value 二 "5" 是 初始 值 为 5, 预览 效果 
如 图 2-23 所 示 。 
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图 2-22 日 期 控件 图 2-23 滑 块 控件 


(10) type 一 "color"( 颜 色 选择 器 控件 )。 颜 色 选择 器 控件 可 以 帮助 用 户 选择 某 种 颜 
色 ,其 使 用 方法 如 下 。 


<input name= "color" type= "color"> 


预览 时 , 当 用 户 单 击 该 控件 时 ,会 弹出 颜色 选择 器 ,如 图 2-24 所 示 。 















| 




















2-24 颜色 选择 器 控件 
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3. 过 label 之 标签 

二 label 二 标签 用 于 为 input 元 素 定义 标签 。 虽 然 label 元 素 不 会 向 用 户 呈 现任 何 特 
殊 效 果 , 但 用 户 选择 该 标签 时 ,浏览 器 就 会 自动 将 焦点 转 到 和 标签 相关 的 表单 控件 上 。 此 
外 ,二 label 二 标签 的 for 属性 应 当 与 相关 元 素 的 id 属性 相同 。 


4. 二 select 二 标签 

所 select 二 标签 用 于 创建 下 拉 菜 单 或 滚动 列表 。 与 其 他 标签 一 样 ,name 属性 是 必须 
存在 的 。 当 提交 表单 时 ,浏览 器 会 提交 选 定 的 项 目 , 或 者 收集 用 逗号 分 隔 的 多 个 选项 ,将 
其 合成 一 个 单独 的 参数 列表 。 此 外 ,用 户 如 果 希 望 一 次 选择 多 个 选项 ,可 以 在 二 select 二 
标签 中 添加 multiple 属性 。 


5. 过 option 之 标签 

过 option 记 标签 可 以 定义 一 个 二 select 二 表单 控件 中 的 每 个 条 目 。 浏 览 器 将 二 option 二 
标签 中 的 内 容 作 为 二 select 二 标签 的 菜单 或 是 滚动 列表 中 的 一 个 元 素 进 行 显示 。 

(1) value 属性 。value 属性 可 以 为 每 个 选项 设置 一 个 值 , 当 表 单 被 提交 时 这 个 值 将 
被 发 送 到 服务 器 端 。 如 果 没 有 指定 value 属性 ,选项 的 值 将 设置 为 二 option 二 标签 中 的 
内 容 。 

(2) selected 属性 。 默 认 设置 下 ,所 有 多 选 的 一 select 过 标签 中 选项 都 是 未 选中 状态 。 
当 二 select 二 标签 中 包含 selected 属性 后 ,就 可 以 实现 一 个 或 多 个 选项 在 初始 状态 时 就 处 
于 被 选中 状态 。 


2.3.6 多 媒体 类 元 素 





一 般 使 用 第 三 方 开发 的 播放 器 或 者 使 用 Flash 进行 展示 ,但 这 种 方法 需 
要 在 浏览 器 中 安装 各 种 插件 才能 完成 。 自 从 HTML 5 出 现 后 这 种 局 面 
得 到 一 定 的 改观 ,目前 HTML 5 提供 统一 的 视频 和 音频 接口 ,浏览 器 自身 就 可 以 播放 这 
些 多 媒体 素材 ,不 再 需要 安装 插件 。 本 小 节 介绍 HTML 5 中 新 增 的 两 个 元 素 
元 素 和 audio 元 素 。 

1. video 元 素 

HTML 5 中 的 video 元 素 ,改善 了 用 户 的 Web 体验 ,能 让 用 户 轻松 愉快 地 观看 视频 。 
目前 ,video 元 素 支持 的 视频 格式 有 3 种 : DOgg( 带 有 Theora 视频 编码 和 Vorbis 音频 编 
码 的 Ogg 文件 ) 格 式 ; @MPEG 4( 带 有 H. 264 视频 编码 和 AAC 音频 编码 的 MPEG 4 文 
件 ) 格 式 ; 9WebM( 带 有 VP8 视频 编码 和 Vorbis 音频 编码 的 WebM 文件 ) 格 式 。 

【案例 2-13】 video 元 素 。 

打开 记事 本 .并 在 其 中 输入 必要 信息 ,完整 的 代码 如 下 。 





video 


< !doctype html> 
<html> 
<head> 

<meta charset= "utf- 8"> 


pA a 
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<title>video 元 素 < /title> 
</head> 


<body> 
<Video width= "320" height= "240" controls> 
< source src="video wf.ogg" type= "video/ogg"> 
对 不 起 ! 您 的 浏览 器 不 支持 <video> 标 签 。< /video> 
< /body> 
</html> 


@ 保存 为 网 页 文件 后 通过 不 同 的 浏览 器 解析 ,显示 效果 如 图 2-25 和 图 2-26 所 示 。 


忆 F: \ch02-13- 祝 频 元 素 . htal - Windows In... 回回 加 | 
文件 四 编辑) 查看 WW) 收藏 和 ) 工具 I) 和 和 助 D 万 


Oe- ©- 四国 八 Per wns 


X 地 址 四) | 入 F.\cho2-13- 视 频 元 素 . htnl 站 回 辐 
中 videc 元 素 链接 


CGC 口 13%20video 元 素 .html 立 三 对 不 起 ! 您 的 浏览 器 不 支持 cvideoy 标签 。 





一 起 志 
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图 2-25 Chrome 浏览 器 预览 video 图 2-26 低 版 本 人 浏览 器 预览 video 
元 素 时 效果 元 素 时 效果 


本 例 中 ,controls 提供 了 播放 、 和 暂停 和 音量 控件 ,方便 用 户 对 视频 进行 控制 ;width 属 
性 和 height 属性 定义 了 视频 显示 的 范围 ;和 二 video 二 标签 中 的 文字 内 容 用 于 在 不 支持 
video 元 素 的 浏览 器 中 显示 提示 信息 。 

2. audio 元 素 

audio 元 素 能 够 播放 声音 文件 或 者 音频 流 ,其 使 用 方法 与 video 元 素 类 似 。audio 元 
素 支持 3 种 音频 格式 , 即 Ogg Vorbis、MP3 和 WAV 格式 。 

【案例 2-14】 audio 元 素 。 

J@ 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,完整 的 代码 如 下 。 

< !doctype html> 

<html> 

<head> 


<meta charset— "utf- 8"> 
<title>audio 元 素 < /title> 
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</head> 


<body> 
<audio controls> 
< source src="audio dx.ogg"type= "audio/ogg"> 
对 不 起 ! 您 的 浏览 器 不 支持 <audio> 标 签 。< /audio> 
< /body> 
</htm> 


加 保存 为 网 页 文件 后 通过 不 同 的 浏览 器 解析 ,显示 效果 如 图 2-27 和 图 2-28 所 示 。 


文件 四 ”编辑 于 ) 查看 WD 收 疗 这 ) 工具 CD) 帮助 00) 
© -BO@ Par Nunx 


eho2\eh02-14-htn15 音 频 元 素 htal 悦 回 和 











对 不 起 ! 您 的 浏览 器 不 支持 audio 标签 。 


站 audio 元 素 


5“ 会 C file///E/ 编 号 书籍 iD/ 交 三 








2.3.7 HTML 5 新 增 的 结构 类 元 素 


在 HTML 5 中 ,为 了 使 文档 层次 更 加 清晰 .新 增 了 几 个 与 页 眉 、 内 
容 区 块 和 页 脚 等 文档 结构 相关 的 结构 类 元 素 。 下 面 依托 一 个 简单 的 实 
例 向 读者 讲解 结构 类 元 素 的 具体 含义 。 

【案例 2-15】 HTML 5 结构 类 元 素 。 

Q@ 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,完整 的 代码 如 下 。 





< !doctype html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title> HTML 5 结构 类 元 素 < /title> 
< /head> 


<body> 
<header id= "page header"> 
<hl> 这 里 是 网 页 内 容 的 区 块 标题 < /hl> 
<nav> 
<ul> 


、\ 
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<1i><a href= 叶 "> 导航 1< /a>< /li> 
<1i><a href= 叶 "> 导航 2< /a></1i> 
<li><a href=" 啡 "> 导航 3< /a></1i> 
</ul> 
</nav> 
< /header> 
< section id= "post"> 
<article> 
<header id= "post header"> 
<h2> 这 里 是 文章 的 标题 < /h2> 
<p> 文 章 作 者 
<time datetime= "2015- 05- 17"> 发 布 时 间 < /time> 
</p> 
< /header> 
<aside> 
<p> 当 前 文章 的 附属 信息 < /p> 
</aside> 
<footer> 
<p> 区 块 内 容 的 脚注 < /p> 
</footer> 
</article> 
</section> 
< footer id= "page footer"> 
<p> gcopy; 2015 宇 泽 互联 < /p> 
< /footer> 
< /body> 
</html> 


外 上 述 代 码 由 于 没有 添加 CSS 内容 ,所 以 使 用 浏览 器 预览 时 各 种 结构 显示 的 并 不 明 


确 , 这 里 给 出 上 述 代码 的 结构 示意 图 ,如 图 2-29 所 示 。 通 过 上 述 代 码 结构 分 析 , 需 要 学 习 
以 下 内 容 。 





body 





header 








nav 














section 





article 





header 








aside 














footer 


























footer 











图 2-29 结构 示意 图 
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(1) header 元 素 。header 元 素 用 于 定义 文档 的 页 眉 ,是 一 种 具有 引导 作用 的 结构 类 
元 素 , 一 般 用 来 放置 整个 页 面 或 某 个 区 块 的 标题 。 需 要 说 明 的 是 ,HTML 5 并 未 限制 使 
用 header 元 素 的 个 数 , 例 如 ,本 例 中 为 整个 页 面 头 部 定义 了 id= "page_header" 的 header 
元 素 ,也 为 文章 内 容 的 标题 部 分 定义 了 id= "post_header" 的 header 元 素 。 

(2) nav 元 素 。nav 元 素 用 于 定义 导航 链接 的 部 分 ,一 个 页 面 可 以 包含 多 个 nav 元 
素 ,作为 页 面 整 体 或 者 不 同 部 分 的 导航 。 

(3) section 元 素 。section 元 素 用 于 对 网 站 中 的 内 容 进行 分 块 , 当 需要 描述 页 面馆 辑 
区 域 时 ,可 以 使 用 section 元 素 代替 之 前 滥用 的 二 div 二 标签 。 

(4) article 元 素 。article 元 素 用 于 定义 独立 的 ,完整 的 ,可 以 单独 被 外 部 引用 的 内 
容 。 该 元 素 所 包含 的 内 容 可 以 是 一 篇 文章 .一 段 独 立 的 用 户 评论 或 者 一 篇 独立 的 论坛 
帖子 。 

article 元 素 通 常 拥有 它 自 己 的 标题 (该 标题 一 般 使 用 header 元 素 进 行 包 庄 ), 有 时 还 
有 自己 的 脚注 (该 脚注 一 般 使 用 aside 元 素 进行 包 庄 ) 。 

注意 : 在 HTML 5 中 section 元 素 与 article 元 素 的 侧重 点 不 同 ,section 元 素 强调 的 
是 分 块 ,而 article 元素 强调 的 是 独立 性 。 例 如 ,section 元 素 就 像 报 纸 中 的 娱乐 版 和 体育 
版 ,而 article 元 素 就 像 某 个 板块 中 的 一 篇 文章 。 

section 元 素 有 以 下 几 点 禁忌 。 

G@ 不 要 将 没有 标题 的 内 容 区 块 使 用 section 元 素 。 

@ 不 要 将 section 元 素 用 作 设置 页 面 的 容器 ,要 使 用 div 元 素 。 

@ 如 果 article 元 素 更 符合 使 用 条 件 , 尽 量 不 要 使 用 section 元 素 。 

(5) aside 元 素 。aside 元 素 用 来 表示 当前 文章 的 附属 信息 , 它 可 以 包含 与 当前 页 面相 
关 的 引用 、 侧 边栏 .导航 条 ,以 及 其 他 有 别 于 主要 内 容 的 部 分 。 

当 aside 元 素 被 包含 在 article 元 素 内 部 时 ,主要 作用 是 当前 文章 的 附属 信息 ; 当 aside 
元 素 处 在 article 元 素 外 部 时 ,主要 作用 是 站 点 的 全 局 附属 信息 ,如 友情 链接 、 其 他 文章 列 
表 和 广告 列表 等 。 

(6) footer 元 素 。footer 元 素 通 常 包括 其 相关 的 区 块 信息 ,如 相关 阅读 链接 和 版 权 
等 ,设计 者 可 以 在 文档 的 多 个 地 方 使 用 多 个 footer 元 素 。 


2.4 ”过 程 指 导 一 一 HTML 5 元 素 的 简单 运用 


HTML 5 所 包含 的 元 素 众 多 ,在 学 习 初 期 建议 读者 循序 渐进 地 记忆 各 种 标签 的 含 
义 。 本 节 在 之 前 学 习 的 基础 上 使 用 记事 本 创建 一 个 简单 的 网 页 ,其 目的 是 通过 该 环节 的 
练习 加 强 对 某 些 元素 的 认识 。 具 体 实现 过 程 如 下 。 

(1) 打开 记事 本 ,并 在 其 中 输入 必要 信息 ,完整 的 代码 如 下 。 

< !doctype html> 


<html> 
<head> 





> 
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<meta charset= "utf- 8"> 
<title> HTML 5 元 素 的 简单 运用 < /title> 


</head> 


<body> 
<header>< img src= "html1510go.png" width= "220" height= "220"> < /header> 


<article> 


<header> 
<h2> HTML 5 发 展 前 景 < /h2> 
<p> 作 者 : 宇 泽 互联 snbsp; snbsp; 发 布 日 期 : 

<time datetime="2015- 05- 17"> 2015- 05- 17< /time> 

</p> 

</header> 

<hr /> 

<p> "HTML 5 是 开放 的 Web 网 络 平台 的 葛 基 石 。HTML 5 以 及 Javascript 和 css 相关 技术 能 够 
让 开发 者 在 任何 设备 上 都 运行 开发 丰富 的 网 页 应 用 ,并 且 会 有 越 来 越 多 的 企业 加 入 HTML 
5 的 大 平台 上 来 。< /p> 

<h3> HTML 5 的 特点 < /h3> 

<p>HTML 5 有 两 大 特点 :首先 ,强化 了 web 网 页 的 表现 性 能 。 其 次 ,追加 了 本 地 数据 库 等 web 
应 用 的 功能 。 广 义 论 及 HTML 5 时 ,实际 指 的 是 包括 HTML、CSs 和 Javascript 在 内 的 一 套 
技术 组 合 。 它 希望 能 够 减少 浏览 器 对 于 需要 插件 的 网 络 应 用 服务 (RIA) ,如 Adobe Flash、 
Microsoft Silverlight 与 Oracle JavaFX 的 需求 ,并 且 提 供 更 多 能 有 效 增强 网 络 应 用 的 
标准 集 。< /p> 

<ul> 
<1i> 支 持 视频 的 播放 /录音 功能 < /1i> 
<1i> 支 持 音频 的 播放 /录音 功能 < /1i> 
<1i> 人 允许 Web 页 面 运 行 应 用 < /1i> 
<1i> 支 持 丰 富 的 2D 图 片 < /1i> 
<1i> 支 持 即 时 通信 功能 < /1i> 


</ul> 


</article> 
< footer> Copyright gcopy; <a href= "mailto:wufengl1216 126.com"> 宇 泽 互联 </a> 


2014- 2016,All Rights Reserved.< /footer> 


</body> 

</html> 

(2) 在 记事 本 的 菜单 栏 中 执行 “文件 ”>“ 保 存 ” 命 令 , 此 时 弹出 “另存 为 "对话 框 ,并 在 
“文件 名 ”文本 框 中 输入 index. html, 将 文档 进行 保存 。 

(3) 启动 浏览 器 ,预览 刚才 保存 的 文档 ,此 时 读者 会 发 现 页 面 并 不 美观 。 为 了 解决 这 
个 问题 ,需要 为 页 面 添 加 部 分 CSS 规则 ,来 规范 页 面 中 的 元 素 。 将 下 面 的 代码 片段 添加 
到 记事 本 中 ,其 位 置 在 二 head 二 和 二 /head 二 之 间 。 


< style type= "text/css"> 
body { 


background: url (bg.png) repeat; 


}/* 载 人 网 页 背景 图 像 ,并 设置 为 平 铺 效 果 * / 
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h2 { 

text- align: center; 
1/* 设置 <h2> 标 签 内 部 文字 居中 * / 
header { 

text- align: center; 
1/* 设置 header 元 素 内 的 内 容 居 中 * / 
articlep{ 

text- indent: 2em; 


1/* 设置 文章 正文 中 段落 缩 进 2 个 汉字 的 距离 * / 


footer { 
font- size: 12px; 
text- align: center; 
}/* 设置 版 权 区 域 文字 大 小 和 居中 位 置 * / 


</style> 


(4) 再 次 保存 和 预览 ,其 效果 如 图 2-30 所 示 。 


让 HTML 5 元 素 交 间 力 E 用 ”x 
后 六 已 | 口 清华 网 页 设计 ( html5+css3 版 ) /配套 网 站 /ch02/ 过 程 指导 /indexhtml 窑 
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HTML 5 的 特点 
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2-30 HTML 5 元 素 的 简单 应 用 的 预览 效果 


需要 说 明 的 是 ,读者 在 制作 案例 的 过 程 中 ,肯定 觉得 使 用 “记事 本 ”制作 网 页 十 分 麻烦 
和 枯燥 ,笔者 的 用 意 在 于 让 读者 熟悉 这 些 标签 元 素 的 含义 ,至 于 工作 中 如 何 制作 网 页 ,后 
续 章节 将 结合 HTML 5 和 CSS 3 的 知识 重点 讲解 Dreamweaver CS6。 
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2.5 自主 任务 一 一 使 用 记事 本 创建 简单 页 面 


根据 2. 4 节 的 案例 制作 ,读者 应 该 了 解 和 掌握 超 文本 置 标语 言 中 常见 标签 的 含义 及 使 
用 方法 。 本 节 再 次 通过 实 训 的 方式 ,进一步 加 强 各 种 标签 的 认 知 ,页 面 最 终 效 果 如 图 2-31 
所 示 ,请 读者 结合 对 标签 的 理解 实现 该 页 面 。 


Super-yuze 
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2-31 ”最终 效果 图 


1. HTML、XHTML 和 HTML 5 是 什么 ? 它们 之 间 有 什么 联系 ? 

2. 举例 说 明 什 么 是 块 元 素 , 什 么 是 内 联 元 素 。 

3. 在 HTML 5 新 增 的 结构 类 元 素 中 ,section 元 素 与 article 元 素 的 区 别 是 什么 ? 
4. header 元 素 能 否 在 页 面 中 多 次 出 现 ? 

5. 使 用 列表 元 素 制作 如 图 2-32 所 示 的 嵌 套 列表 。 


6 > | 人 file:///E:/ 编 





图 2-32 赃 套 列表 


第 2 章 HTML 语言 基础 


6. 使 用 表单 元 素 制作 “调查 问卷 ,如 图 2-33 所 示 。 


叫 王 
< > .Ca 


个 人 基金 投资 者 投资 情况 调查 问卷 

(1) 您 选择 投资 公募 基 金 的 主要 原因 是 ，( ) 

@ 公 旨 运作 管理 规范 、 信 息 拱 露 全 面 ， 可 以 方便 地 查找 相关 信息 ， 申 购 、 赎 回 等 均 很 便利 
公募 基金 有 比较 强大 的 投 研 团队 

日 公 划 基金 投资 门 机 较 低 ， 对 投资 者 没有 本 多 的 资质 及 投资 金额 要 求 

《2) 你 选择 投资 专 户 一 对 多 基金 的 主要 原因 是 ，( ) 


目 专 户 一 对 多 基金 管理 规 多 ， 同 公募 基金 一 样 有 比较 强大 的 投 研 团 队 ， 且 投资 范围 、 投 资 比例 较 自由 
© TN 性 ， 可 以 更 好 地 满足 投资 者 要 求 


© 








(3) 不 希望 获得 哪 方面 的 信息 ? 《多 选 题 ) 
目 产品 设计 理念 
路 


投资 思 


如 您 希望 获得 抽奖 机 会 ， 请 留 下 如 下 信息 : 
姓名 ，| 
手机 | 
住址 ，| 








图 2-33 ”调查 问卷 


41 


第 3 章 





Dreamweaver 基础 与 CSS 入 门 


【本 章 导读 】 

在 工作 中 ,常用 Adobe Dreamweaver 工具 软件 构建 网 站 和 应 用 程序 ,该 工具 提供 可 
视 化 布局 功能 ,开发 者 能 够 快速 创建 站 点 。 本 章 除了 介绍 该 款 软件 的 使 用 方法 外 ,还 将 向 
读者 详细 介绍 工作 中 必 不 可 少 的 CSS 内 容 。 

【学 习 目标 】 

如 熟悉 Dreamweaver 的 工作 环境 ; 

名 了解 站 点 及 其 相关 知识 ,能 够 使 用 Dreamweaver 创建 和 管理 站 点 ; 

全 掌握 CSS 的 基本 语法 ,理解 爹 模型 的 内 涵 ; 





Adobe Dreamweaver CS6 是 一 个 全 面 的 专业 工具 集 , 可 用 于 设计 并 
部 署 极 具 吸引 力 的 网 站 和 Web 应 用 程序 。 在 编辑 文档 的 状态 下 ， 
Dreamweaver CS6 的 工作 环境 如 图 3-1 所 示 ,其 中 常用 的 区 域 含义 如 下 。 

(1) 文档 工具 栏 : 该 工具 栏 提供 各 种 文档 窗口 视图 ,以 及 各 种 查看 选项 和 方法 。 

(2) 代码 视图 : 用 于 编辑 和 查看 当前 编辑 状态 下 的 网 页 源 代码 。 

(3) 设计 视图 : 用 于 可 视 化 页 面 布局 .可视化 编辑 ,提供 快速 应 用 程序 开发 的 设计 环 
境 。 在 该 视图 中 ,Dreamweaver 显示 的 文档 内 容 类 似 于 在 浏览 器 中 查看 页 面 时 的 效果 。 

(4) 属性 面板 : 用 于 查看 和 更 改 所 选 对 象 或 文本 的 各 种 属性 ,每 种 对 象 都 具有 不 同 
的 属性 ,默认 状态 下 该 面板 是 折 释 状态 。 

(5) 标签 选择 器 : 用 于 显示 环绕 当前 选 定 内 容 所 在 标签 的 层次 结构 。 单 击 该 层次 结 
构 中 的 任何 标签 ,可 以 选择 该 标签 及 其 全 部 内 容 。 

(6)“ 文 件 ?面板 : 用 于 管理 当前 站 点 和 本 地 的 文件 ,类似 于 Windows 资源 管理 器 。 

(7)“CSS 样式 ”面板 : 用 于 管理 和 编辑 选 定 对 象 的 CSS 样式 规则 。 


3.1.1 文档 和 编码 工具 栏 
Dreamweaver CS6 包含 了 4 种 工具 栏 : 样式 呈现 文档 标准、 编码 。 用 户 可 以 通过 
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属性 面板 标签 选择 器 “文件 " 面板 
图 3-1 Dreamweaver CS6 的 工作 环境 


执行 “查看 ”一 “工具 栏 " 命 令 , 打 开 或 关闭 某 个 工具 栏 。 这 里 文档 工具 栏 和 编码 工具 栏 较 
为 常用 ,下 面 进行 简单 介绍 。 

1. 文档 工具 栏 

使 用 文档 工具 栏 所 包含 的 按钮 可 以 在 文档 的 不 同 视图 之 间 进 行 快速 切换 。 工 具 栏 中 
还 包含 一 些 与 查看 文档 、 在 本 地 和 远程 站 点 间 传 输 文档 有 关 的 常用 命令 与 选项 ,如 图 3-2 
所 示 。 











图 3-2 文档 工具 栏 


感到 (显示 代码 视图 ) : 单 击 该 按钮 后 ,文档 窗口 中 仅 显示 页 面 的 代码 。 

硬 移 避 ( 显 示 代 码 视图 和 设计 视图 ) : 单 击 该 按钮 后 ,将 文档 窗口 拆 分 为 代码 视图 和 设 
计 视 图 。 

二 ( 显 示 设 计 视图 ) : 单 击 该 按钮 后 ,文档 窗口 中 仅 显示 页 面 的 设计 界面 ,用 户 可 
以 在 此 窗口 中 对 网 页 元 素 直接 编辑 。 

让 颈 副 |( 实 时 视图 ): 显示 不 可 编辑 的 、 交 互 式 的 .基于 浏览 器 的 文档 视图 。 

网 (多 屏幕 ): 可 以 使 设计 师 在 多 个 设备 屏幕 大 小 不 同 的 状态 下 预览 当前 页 面 。 

项 (浏览 器 调试 /预览 ) : 在 浏览 器 中 预览 或 调试 文档 。 

辆 (文件 管理 ) : 弹出 文件 管理 菜单 。 

酌 (CW3C 验证 ): 方便 设计 师 对 当前 页 面 在 线 验 证 是 否 符合 W3C 的 标准 。 

国 ( 愉 查 浏览 器 兼容 性 ): 用 于 检查 用 户 的 CSS 是 否 对 于 各 种 浏览 器 均 兼 容 。 

项 (可 视 化 助理 ) : 可 以 使 用 各 种 可 视 化 助理 来 设计 页 面 。 
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图 (刷新 设计 视图 ) : 在 代码 视图 中 对 文档 进行 更 改 后 刷新 文档 的 设计 视图 ,可 以 使 
更 改 内 容 显示 在 设计 视图 中 。 

(文档 标题 ): 在 此 输入 的 文字 内 容 , 将 会 作为 网 站 标题 出 现在 浏 
览 器 左上 角 。 


2. 编码 工具 栏 
编码 工具 栏 垂直 显示 在 文档 窗口 的 左 侧 , 它 包含 可 用 于 执行 多 种 标准 编码 操作 的 按 
钮 ,如 图 3-3 所 示 。 
加 (打开 的 文档 ): 显示 当前 打开 的 文档 。 
国 ( 显 示 代码 导航 ): 显示 代码 导航 器 。 
圈 ( 折 又 整个 标签 ): 折 彼 一 组 标签 之 间 的 内 容 。 
图 ( 折 释 所 选 ); 折 释 所 选 代码 ， 
国 ( 扩 展 全 部 ): 还 原 所 有 折 释 的 代码 。 
国 ( 选 择 父 标签 ): 选择 当前 标签 的 父 标签 。 
圈 ( 选 取 当 前 代码 段 ): 选取 当前 代码 段 。 
圈 ( 行 号 ) : 显示 或 隐藏 代码 的 行 号 。 
国 (高 亮 无 效 代码 ): 用 黄色 显示 无 效 代码 。 
国 (自动 换行 ): 自动 换行 。 
圆 (语法 错误 警报 ): 启用 或 禁用 语法 错误 警报 。 
回 ( 应 用 注释 ): 在 所 选 代码 两 侧 添加 注释 标签 。 
国 (删除 注释 ) : 删除 注释 。 
国 ( 环 绕 标签 ) : 在 所 选 代码 两 侧 自动 添加 某 个 标签 。 
圆 (最 近 的 代码 片段 ) : 从 * 代 码 片段 "面板 中 插入 代码 。 
图 (移动 或 转换 CSS) : 移动 CSS 位 置 ,或 转换 CSS 类 别 。 
国 ( 缩 进 代码 ): 将 选 定 内 容 向 右 移动 。 
图 (三 出 代码 ); 将 选 定 内 容 向 左 移动 。 
图 (格式 化 源 代码 ): 将 代码 赋予 标准 格式 。 


3.1.2 属性 面板 


显示 属性 面板 的 快捷 键 是 Ctrl 十 F3, 用 户 可 以 通过 该 面板 检查 和 编辑 当前 选 定 页 面 
元 素 ( 如 文本 和 插入 的 对 象 ) 最 常用 的 属性 。 根 据 选 定 元 素 的 不 同 ,属性 面板 所 呈现 的 属 
性 也 不 尽 相同 ,如 图 3-4 和 图 3-5 所 示 。 




















[FE | Se] Se | 对 牙 3| 奖 加 | 


图 3-3 编码 工具 栏 
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3-4 ”属性 面板 ( 选 定 对 象 为 图 像 
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图 3-5 属性 面板 ( 选 定 对 象 为 文本 ) 
通过 属性 面板 ,用 户 能 够 快捷 地 修改 、 应 用 对 象 的 基本 属性 ,使 用 频率 较 高 。 
3.1.3 常用 面板 介绍 


Dreamweaver CS6 为 用 户 提供 了 可 自由 组 合 的 多 功能 面板 ,大 量 操作 可 以 快捷 地 通 
过 面板 迅速 完成 。 

1.“ 插 入 "面板 

显示 或 隐藏 “插入 ”面板 的 快捷 键 是 Ctrl 十 F2。 该 面板 包含 用 于 创建 和 插入 对 象 (如 
表格 、 图 像 和 链接 ) ,其 中 包含 多 种 按钮 。 

这 些 按 钮 按 9 种 类 别 进行 组 织 。 

(1) “常用” 类别 : 用 于 创建 和 插入 最 常用 的 对 象 ,如 图 像 和 表格 。 

(2)“ 布 局 ”类别 : 用 于 插入 表格 .表格 元 素 ` 二 div 之 标签 ,框架 和 Spry 构件 。 

(3)“ 表 单 ? 类 别 : 包含 一 些 按钮 ,用 于 创建 表单 和 插入 表单 元 素 。 

(4)“ 数 据 ? 类 别 : 用 于 插入 Spry 数据 对 象 和 其 他 动态 元 素 ,例如 ,记录 集 、 重 复 区 域 
以 及 插入 记录 表单 和 更 新 记录 表单 。 

(5) Spry 类 别 : 包含 一 些 用 于 构建 Spry 页 面 的 按钮 ,包括 Spry 数据 对 象 和 构件 。 

(6) jQuery Mobile 类 别 : 可 帮助 用 户 快速 设计 出 适合 大 多 数 移动 设备 的 Web 应 用 
程序 ,同时 可 使 其 自身 适应 设备 的 各 种 尺寸 。 

(7) InContext Editing 类 别 : 包含 供 生 成 InContext 编辑 页 面 的 按钮 ,包括 用 于 可 编 
辑 区 域 ,重复 区 域 和 管理 CSS 类 的 按钮 。 

(8)“ 文 本 ”类 别 : 用 于 插入 各 种 文本 格式 和 列表 格式 的 标签 。 

(9) “收藏 夹 ?类 别 : 用 于 将 “插入 ”面板 中 最 常用 的 按钮 分 组 和 组 织 到 某 一 公共 
位 置 。 

部 分 类 别 如 图 3-6 一 图 3-8 所 示 。 





常用 
交口 电 澡 | 国 目 国 -在 - 装 间 上 加 Do 
图 3-6 “常用 ”类 别 








ry | 
"laser 


3-7 “表单 ”类别 





“常用 ”类 别 是 “插入 ”面板 中 使 用 率 非常 高 的 类 别 , 其 中 各 按钮 的 含义 如 下 。 
图 ( 超 链接 ) : 在 网 页 中 插入 超 链 接 。 
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图 3-8 jQuery Mobile 类 别 





加 (电子 邮件 链接 ) : 插入 电子 邮件 链接 。 

图 (命名 锚 记 ) : 用 于 页 面 内 定位 。 

刻 ( 水 平 线 ): 在 光标 处 插入 水 平 线 。 

国 ( 表 格 ) : 插入 表格 。 

国 ( 插 入 一 div 二 标签 ); 插入 二 div 之 标签 。 

国 ( 图 像 ): 可 插入 图 像 、 占 位 符 、 热 点 等 对 象 。 

圈 ( 媒 体 ): 可 插入 Flash、FLYV 等 多 媒体 对 象 。 

病 ( 构 件 ): 由 HTML、CSS 和 JavaScript 组 成 的 网 页 组 件 。 
图 (日 期 ) : 可 插入 多 种 格式 的 日 期 。 

图 (服务 器 端 包括 ): 选择 一 个 网 页 文件 ,将 其 添加 到 当前 站 点 中 。 
加 (注释): 插入 HTML 注释 。 

国 ( 文 件 头 ): 设置 文件 头 不 同 的 属性 。 

更 (脚本 ): 插入 脚本 。 

图 (模板 ): 创建 和 编辑 模板 。 

砚 ( 标 签 ) : 插入 置 标语 言 的 标签 ,方便 编辑 代码 。 


2.“CSS 样式 ”面板 

“CSS 样式 ?面板 的 作用 在 于 跟踪 影响 当前 所 选 页 面 元 素 的 CSS 规则 和 属性 ,打开 或 
隐藏 该 面板 的 快捷 键 是 Shift 十 F11, 如 图 3-9 所 示 。 对 于 初 
学 者 来 讲 ,“CSS 样式 ”面板 可 以 用 于 查看 和 修改 CSS 规则 ， 
而 随 着 对 CSS 的 熟悉 ,笔者 建议 读者 手动 书写 CSS 规则 ,这 
样 不 但 对 各 种 属性 有 进一步 了 解 ,而 且 编写 代码 的 效率 会 大 
幅 提升 。 


3.1.4 常规 设置 


1. 首选 参数 设置 

执行 “编辑 ”一 “首选 参数 "命令 ,或 按 Ctrl 十 U 键 , 即 可 
打开 “首选 参数 ”对 话 框 ,如 图 3-10 所 示 。 

在 该 设置 界面 中 ,包含 “文档 选项 ”和 “编辑 选项 ”两 类 设 ”图 3-9 “CSS 样式 "面板 
置 ,部 分 主要 的 设置 含义 如 下 。 

(1) 启用 相关 文件 : 用 于 查看 哪些 文件 与 当前 文档 相关 (如 CSS 或 JavaScript 文 
件 )。Dreamweaver 在 文档 顶部 为 每 个 相关 文件 显示 了 一 个 按钮 , 单 击 该 按钮 可 打开 相 
应 文件 。 

(2) 移动 文件 时 更 新 链接 : 当 移动 、 重 命名 或 删除 站 点 中 的 文档 时 所 发 生 的 操作 , 系 
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文档 选项 : 国 显示 欢迎 屏幕 @) 
启动 时 重新 打开 文档 B) 
圆 打 开 只 该 文件 时 警告 用 户外 
国 启 用 相关 文件 中 
搜索 动态 相关 文件 0) ;| 车 动 sai 
移动 文件 时 更 新 链接 L); | 提示 = 
编辑 选项 : 国 括 入 对 象 时 显示 对 话 框 区 ) 
国 允 许 双 字 节 内 联 输入 @) 
国标 题 后 切换 到 普通 段落 人 A) 
允许 多 个 连续 的 空格 如 
国 用 <streng》 和 <em> 代 普 @>》 和 <> 
国 在 > 或 G1 盖 Q6》 标签 中 放置 可 编辑 区 jj 发 出 警 寺 


历史 步骤 最 多 次 数 区 ): 50 
拼 瑟 字典 (@) 


























ELTY [mm 











图 3-10 “首选 参数 ”对 话 框 


统 会 提示 用 户 进 行 何 种 操作 。 

(3) 允许 多 个 连续 的 空格 : 指定 在 “设计 ”视图 中 输入 两 个 或 更 多 的 空格 时 将 创建 不 
中 断 的 空格 ,这 些 空格 在 浏览 器 中 显示 为 多 个 空格 。 该 选项 主要 针对 习惯 于 在 字 处 理 程 
序 中 输入 的 用 户 。 当 禁用 该 选项 时 ,多 个 空格 将 被 当 作 单个 空格 。 

(4) 历史 步骤 最 多 次 数 : 确定 在 “历史 记录 ?面板 中 保留 和 显示 的 步骤 数 。 

2. 代码 格式 设置 

(1) 执行 菜单 栏 中 的 “编辑 ”~ 首选 参数 "命令 ,打开 * 首 选 参数 ?对话 框 。 选 择 左 侧 
的 “代码 格式 ?选项 。 

(2) 在 “高 级 格式 设置 " 旁 单 击 CSS 按钮 ,此 时 弹出 如 图 3-11 所 示 的 对 话 框 。 

(3) 在 此 对 话 框 中 ,选择 要 应 用 于 CSS 源 代码 的 选项 ,即刻 在 下 方 “ 预 览 " 窗 格 中 实时 
显示 修改 后 的 预览 效果 。 这 里 清除 “每 个 属性 位 于 单独 的 行 上 " 复 选 框 , 即 可 实现 属性 放 
置 在 一 行 上 的 效果 。 其 他 设置 效果 内 容 读者 可 以 自行 修改 ,这 里 不 再 费 述 。 


3.2 站 点 


站 点 (site) 是 指 一 个 存储 区 域 , 它 存 储 了 一 个 网 站 的 所 有 文件 。 在 
实际 工作 中 ,通常 为 每 一 个 要 处 理 的 网 站 建立 一 个 本 地 站 点 ,这 样 可 以 
方便 地 对 网 站 内 部 的 文件 进行 组 织 、 维 护 和 管理 。 


3.2.1 站 点 的 基本 概念 及 其 创建 方法 


站 点 由 文档 和 文件 夹 组 成 ,不 同 的 文件 夹 保存 不 同类 别 的 网 页 内 容 。 例 如 ,images 文件 
夹 存放 各 种 网 页 图 像素 材 ;style 文件 夹 存 放 CSS 样式 文件 ;JavaScript 文件 夹 存 放 JS 文 件 。 





a 


过 
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回 左 大 括号 位 于 单 捉 的 行 上 @) 
回 仅 在 多 于 一 个 属性 时 才 适 用 如 
回 规 m9 所 有 选择 器 位 于 同一 行 上 G) 
回 规 之 间 空 行 必 ) 
预 上 
.myShortStyle { 
color: #000000; 




















} 
.myLongStylel, .myLongStyle2 { 
color: #FFFFFF; 
margin: Opx; 
padding: Opx; 
display: block; 























图 3-11 “CSS 源 格式 选项 ”对 话 框 


1. 本 地 站 点 

本 地 站 点 是 指 在 本 地 计算 机 硬盘 中 创建 的 用 来 储存 整个 网 站 文件 的 文件 夹 。 制 作 网 
页 文件 的 所 有 素材 及 其 相关 文件 均 要 放 在 该 站 点 内 
的 文件 夹 下 。 在 Dreamweaver 中 ,使 用 “文件 ”面板 
管理 站 点 ,如 图 3-12 所 示 。 

2. 远程 站 点 

远程 站 点 是 指 存储 于 Internet 服务 器 上 的 站 点 
和 相关 文档 。 也 就 是 说 ,用 户 发 布 到 远程 文件 夹 的 
文件 和 子 文件 夹 是 本 地 创建 的 文件 与 子 文件 夹 的 















Bd seripts 
-Tenplates 文件 夹 。 201 
四 - 固 网 站 参考 文件 夹 。 201 

物 [2007]106 号 svt 1571B 媒体 文 ..，201 
sbout. htnl 12KB 360 se... 201 


对 
出 本。 Ra 
国 ws4s jpe 1131B ACDSee .. 201 
3. 创建 本 地 站 点 全 tn 10B 层 权 样 .201 
加 视频 单 html SKB 360 se... 201 
进行 网 页 制作 的 第 一 步 就 是 创建 本 地 站 点 ,站 本 详细 内 容 页 hl 1218 360 se 201 ~ 






点 管理 会 让 用 户 的 工作 变 得 简单 而 富有 成 效 ,况且 
许多 功能 必须 在 站 点 中 才能 实现 。 总 之 ,如 果 不 是 
仅 编辑 需要 的 单个 页 面 ,那么 就 必须 创建 本 地 站 点 。 

【案例 3-1】 创建 “ 宇 泽 互联 ”站 点 。 

O@ 在 Dreamweaver CS6 的 菜单 栏 中 执行 “站 点 ”一 “新 建站 点 ”命令 ,显示 如 图 3-13 
所 示 的 对 话 框 。 

@ 在 此 对 话 框 左 侧 选择 * 站 点 ?类别 ,并 在 右 侧 * 站 点 名 称 "文本 框 中 输入 * 宇 泽 互 联 ” 
特别 注意 的 是 ,此 本 地 文件 夹 可 以 位 于 本 地 计算 机 上 ,也 可 以 位 于 网 络 服务 器 上 。 

@ 设置 完成 后 ,可 以 填写 其 他 类 别 , 包 括 " 服 务 器 "类别 ,还 可 以 在 其 中 指定 远程 服务 








3-12 “文件 ”面板 
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图 3-13 ”站 点 设置 对 象 


器 上 的 远程 文件 夹 。 由 于 本 例 不 涉及 发 布 页 面 操作 ,所 以 这 里 不 需要 进行 任何 设置 。 
@ 单 击 “ 保 存 ” 按 钮 , 即 可 完成 本 地 站 点 的 创建 。 此 时 “文件 ”面板 中 立刻 显示 新 站 点 
的 根 目 录 , 如 图 3-14 所 示 。 


3.2.2 “文件 ”面板 的 常用 操作 
站 点 创建 完成 后 ,站 点 内 没有 任何 文件 ,下 面 将 主要 介绍 站 点 内 的 基本 操作 ,这 些 操 
作 也 是 工作 过 程 中 的 第 一 个 环节 。 


1. 新 建文 件 夹 和 文件 

【案例 3-2】 新 建文 件 夹 和 文件 。 

@ 在 成 功 创建 站 点 的 状态 下 , 右 击 “ 文 件 "面板 内 站 点 名 称 ,然后 在 弹出 的 右键 菜单 
中 选择 “新 建文 件 夹 ”选项 ,如 图 3-15 所 示 。 





图 3-14 创建 < 宇 泽 互联 ?站 点 图 3-15 右键 菜单 
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@ 此 时 ,在 站 点 根 目录 下 新 增 了 一 个 文件 夹 , 并 且 新 建文 件 夹 名 称 处 于 可 编辑 状态 ， 
如 图 3-16 所 示 。 这 里 将 新 建文 件 夹 命名 为 style, 用 于 存放 站 点 CSS 样式 文件 。 

@ 重复 步骤 @ 可 以 创建 多 个 文件 夹 。 此 外 ,选中 某 个 文件 夹 将 其 拖 放 到 另 一 个 文件 
夹 上 面 , 释 放 鼠 标 即 可 实现 嵌 套 文件 夹 的 效果 ,如 图 3-17 所 示 。 


文件 | 
只 G|31Z 名 起 | 四 CI| | 加 


[本 地 文件 [大 小 [类 
9 3 轴 \ 丹 





























图 3-16 新 建文 件 夹 图 3-17 ” 霸 套 文件 夹 


@ 车 想 要 创建 网 页 文件 ,可 执行 菜单 栏 中 的 文件” 一“ 新建 ”命令 ,或 者 按 Ctrl 十 N 
键 ,这 时 显示 “新 建文 档 ” 对 话 框 。 

@ 选择 对 话 框 左 侧 的 “空白 页 "类别, 从 “页 面 类 型 "中 选择 HTML 类 型 ,然后 在 “ 布 
局 ”列表 框 中 选择 “无 ”类 型 。 

@ 在 “文档 类 型 "下 拉 菜 单 中 选择 HTML 5 选项 ,如 图 3-18 所 示 。 最 后 单 击 “ 创 建 ” 
按钮 , 即 可 创建 一 个 空白 文档 。 最 后 , 按 Ctrl 十 S 键 保存 网 页 文档 。 


时 


哇 muL 模板 1 列国 证， 居中 
时 xsur ( 蓝 页 ) 1 到 固定 ， 居 中， 标 县 和 轩 主 
图 空 模板 | 本 xstr ( 片 断 ) 1 到 让 态 ,居中 
| 计 和 上 1 到 液态， 居中 ， 标 藉 和 村 E> 
赤 hetionseript 2 到 国定 ， 右 介 习 
有 2 列国 证 , 右 全 位、 标 生 和 
| 时 ee 2 EE, EE、 fi 
国 | 横 相 的 页 二 站 




















到 Business Catalyst TaContext 


ET 和 多 内 容 [LS ] [WAD 
































图 3-18 “新 建文 档 ” 对 话 框 
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2. 站 点 内 文件 的 基本 操作 

在 “文件 ”面板 中 ,可 以 方便 地 对 站 点 内 的 文件 执行 复制 .移动 和 删除 等 操作 ,这 里 以 
示例 的 方式 讲述 具体 操作 方法 。 

【案例 3-3】 站 点 内 文件 的 基本 操作 。 

Q@ 在 “文件 ”面板 中 , 右 击 某 个 文件 或 文件 夹 , 在 弹出 的 右键 菜单 中 执行 “编辑 ” 子 菜 
单 中 的 命令 , 即 可 完成 复制 .粘贴 \ 删 除 等 操作 ,如 图 3-19 所 示 。 























WO ~ CultX 
拷贝 BR Cul+C 
a QtltV 
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图 3-19 站 点 内 文件 的 基本 操作 


@ 当 执 行 这 些 基 本 操作 时 ,必定 造成 文件 位 置 的 变化 ,此 时 弹出 如 图 3-20 所 示 的 对 
话 框 。 单 击 “ 更 新 "按钮 ,系统 将 自动 更 新 与 文件 相关 联 的 链接 。 


更 新 以 下 文件 的 树 接 吗 ? 


Jinages/index. htal 




















3-20 “更 新 文件 ”对 话 框 


3.2.3 管理 站 点 


创建 好 本 地 站 点 后 ,必要 时 还 需 对 站 点 进行 多 方面 的 管理 ,如 打开 站 点 ,复制 站 点 、 编 
辑 站 点 和 删除 站 点 等 。 

【案例 3-4】 管理 站 点 。 

@ 在 Dreamweaver CS6 的 菜单 栏 中 执行 “站 点 ”>“ 管 理 站 点 ”命令 ,打开 如 图 3-21 


、 
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| 2014 国 家 级 教学 成 果 奖 申报 网 站 和 
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图 3-21 “管理 站 点 ”对话 框 


所 示 的 对 话 框 。 

@ 在 列表 中 双击 某 个 站 点 的 名 称 , 即 可 对 该 站 点 的 信息 进行 编辑 。 

@ 如 果 不 需 要 Dreamweaver 对 某 个 本 地 站 点 进行 管理 ,同样 可 以 将 其 从 站 点 列表 中 
删除 。 选 择 某 个 本 地 站 点 , 单 击 国 有 按钮 ,经 过 确认 后 即 可 删除 某 个 站 点 。 

图 如 果 需 要 创建 多 个 结构 类 似 或 相同 的 站 点 , 则 可 以 利用 站 点 的 复制 功能 。 从 一 个 
基准 的 站 点 中 复制 多 个 站 点 ,然后 根据 需要 再 进行 二 次 开发 ,这 样 可 以 极 大 地 提高 工作 效 
率 。 选 择 某 个 本 地 站 点 后 , 单 击 辆 按钮 即 可 。 

@ 站 点 导出 功能 可 以 方便 地 在 各 计算 机 和 软件 版 本 之 间 移 动 站 点 。 选 择 某 个 本 地 
站 点 后 , 单 击 苹 按 钮 .此 时 弹出 * 导 出 站 点 "对话 框 。 选 择 导 出 站 点 的 保存 位 置 后 , 单 击 
“保存 "按钮 ,Dreamweaver 将 该 站 点 的 设置 保存 为 带 有 . ste 扩展 名 的 XML 文件。 

@ 导入 站 点 的 操作 与 上 述 步骤 相反 ,只 须 在 “管理 站 点 "对话 框 中 单 击 * 导 入 站 点 ” 按 
钮 ,然后 选择 之 前 导出 的 站 点 文件 即 可 。 

3.3 重要 的 div 元 素 


纵 观 目前 的 各 类 网 站 ,其 源 代码 中 包含 了 许多 div 元 素 , 如 图 3-22 
所 示 。 其 实 二 div 二 标签 与 其 他 标签 一 样 ,都 是 HTML 文档 中 的 一 个 标 
div 元 素 的 名 字 div 元 素 的 内 联 样式 


Fr style- -display: block; -> 
"style="display:block;position:asolute;top: 39px; right :300x;border :1ox sclidipadding:5px 199x;">¢/div> 
> 









aivy 
splay: block; “>_cyaivy 
lay: block; “></civ> 





3-22 百度 搜索 页 面 的 主体 结构 
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签 ,从 语义 上 来 讲 它 只 不 过 是 一 个 没有 语义 的 .具有 很 强 适用 性 的 标签 。 
3.3.1 div 元 素 是 什么 


div 元 素 是 一 个 块 级 元 素 ,用 来 为 HTML 5 文档 中 大 块 内 容 提供 结构 和 背景 , 它 可 以 
把 文档 分 割 为 独立 的 .不 同 的 部 分 。div 元 素 的 起 始 标签 和 结束 标签 之 间 的 所 有 内 容 都 
是 用 来 构成 这 个 块 的 ,其 中 所 包含 元 素 的 特性 由 过 div 之 标签 的 属性 来 控制 ,或 者 是 通过 
使 用 样式 表格 式 化 这 个 块 来 进行 控制 。 

在 许多 年 前 ,版 面 的 布局 定位 完全 依赖 于 表格 对 象 (table) 。 在 页 面 中 通过 绘制 多 个 
嵌 套 的 表格 ,然后 在 表格 位 置 中 插入 所 需 内 容 , 最 后 通过 表格 的 位 置 控制 ,达到 布局 版 面 
的 目的 。 

而 在 目前 基于 Web 标准 的 网 站 设计 中 ,不 再 使 用 传统 的 表格 定位 技术 ,取而代之 的 
是 采用 DIV 十 CSS 的 方式 实现 各 种 布局 。 


3.3.2 在 Dreamweaver 中 创建 DIV 容器 的 方法 


1. 使 用 Dreamweaver 中 可 视 化 功能 创建 DIV 容器 

借助 Dreamweaver CS6 能 够 快速 插入 二 div 二 标签 并 对 其 应 用 现 有 样式 ,具体 步骤 用 
实例 说 明 。 

【案例 3-5】 使 用 Dreamweaver 创建 DIV 容器 。 

中 启动 Dreamweaver CS6, 将 光标 定位 在 需要 插入 一 div 二 标签 的 位 置 。 

@ 执行 “插入 ”一 “布局 对 象 >“Div 标签 ”命令 ,或 者 在 “插入 ”面板 的 “布局 "类别 中 
单 击 “ 插 入 Div 标签 ”按钮 国 。 

@ 此 时 弹出 如 图 3-23 所 示 的 对 话 框 。 在 此 对 话 框 中 ,“ 插 入 ”下 拉 列 表 框 用 于 选择 
二 div 二 标签 的 位 置 以 及 标签 名 称 ;“ 类 ”下 拉 列 表 框 中 显示 了 当前 应 用 于 标签 的 类 样式 ; 
ID 组 合 列表 框 用 于 更 改 标识 DIV 容器 的 名 称 。 这 里 在 ID 文本 框 中 输入 “dx”。 





























图 3-23 “插入 Div 标签 ”对 话 框 


@ 参数 设置 完成 后 , 单 击 “ 确 定 ” 按 钮 , 即 可 创建 一 个 DIV 容器 ,如 图 3-24 所 示 。 创 
建 后 的 二 div 之 标签 在 设计 视图 中 被 虚线 框 所 包围 , 当 鼠 标 悬 停 在 DIV 容器 上 时 虚线 框 
变 为 红色 实 线 框 。 

需要 说 明 的 是 ,创建 天 div 之 标签 只 是 CSS 布局 工作 的 第 一 步 。DIV 的 作用 仅 是 将 
页 面 中 的 内 容 元 素 标识 出 来 ,为 内 容 添加 样式 则 由 CSS 来 完成 。 
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< E 三 一 一 
| <div id-vdxw> 此 处 显示 “1d "dx 的 内 容 </aiv> ， | 此 处 显示 id "dx" 的 内 容 
区 </body> 加 

</html> - 
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图 3-24 插入 二 div 之 标签 后 的 拆 分 视图 











2. 创建 嵌 套 的 DIV 容器 

div 元 素 是 可 以 被 嵌 套 的 ,主要 用 于 实现 更 为 复杂 的 页 面 排版 。 下 面 以 两 个 实例 说 
明 幅 套 的 DIV 容器 之 间 的 关系 。 

【案例 3-6】 未 谍 套 的 DIV 容器 。 

QO@ 新 建 HTML 5 空白 文档 ,使 用 上 一 案例 中 的 方法 创建 一 个 名 为 top 的 DIV 容器 。 

@ 将 光标 定位 在 代码 视图 的 任意 位 置 , 在 “插入 ?面板 的 “布局 "类别 中 单 击 * 插 入 Div 
标签 ”按钮 国 。 

@ 在 弹出 的 对 话 框 中 ,设置 “插入 ”选项 为 “在 标签 之 后 ”, 并 在 后 方 的 下 拉 列 表 框 中 
选择 一 div id= "top" 二 ;设置 ID 选项 为 main, 如 图 3-25 所 示 。 然 后 单 击 “ 确 定 ” 按 钮 , 即 
可 在 top 容器 后 面 插入 main 容器 。 

@ 以 同样 的 方法 ,在 main 容器 后 面 插入 名 为 footer 的 DIV 容器 ,最 终 的 页 面 结构 
如 图 3-26 所 示 , 布 局 如 图 3-27 所 示 。 















































top 

3-25 在 top 容器 后 面 插入 main 容器 ji 
boay> 
<div id="cop"> 此 处 显示 id "top" 的 内 容 </div> 
<div id="mainn> 此 处 显示 id "mainw 的 内 容 </div> 
<adiv id="foocer"> 此 处 显示 id "foocez” 的 内 容 </divy>| 
</body> footer 

图 3-26 未 嵌 套 的 DIV 容器 的 页 面 结构 3-27 未 嵌 套 的 DIV 容器 布局 示意 图 


【案例 3-7】 其 套 的 DIV 容器 。 

中 新 建 HTML 5 空白 文档 ,创建 一 个 名 为 container 的 DIV 容器 。 

@ 将 光标 定位 在 代码 视图 的 任意 位 置 ,在 “插入 ”面板 的 “布局 ”类 别 中 单 击 “ 插 入 Div 
标签 ”按钮 国 。 

@ 在 弹出 的 对 话 框 中 ,设置 “插入 ?选项 为 “在 开始 标签 之 后 ”, 并 在 后 方 的 下 拉 列 表 
框 中 选择 一 div id 二 "container" 祖 ;设置 ID 选项 为 top, 如 图 3-28 所 示 。 然 后 单 击 “ 确 定 ” 
按钮 , 即 可 在 container 容器 内 部 插入 top 容器 。 

@ 以 同样 的 方法 ,在 top 容器 后 面 或 内 部 插入 多 个 容器 ,最 终 的 页 面 结构 如 图 3-29 
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图 3-28 在 container 容器 内 部 插入 top 容器 


所 示 ,布局 如 图 3-30 所 示 。 

本 案例 中 ,id 二 "container" 的 DIV 作为 盛 放 其 他 元 素 的 容器 , 它 所 包含 的 所 有 元 素 对 
于 id 二 "container" 的 DIV 容器 来 说 都 是 嵌 套 关系 。 对 于 id= "main" 的 DIV 容器 , 则 根据 
实际 情况 进行 布局 ,这 里 分 别 定义 id 二 "mainbox" 和 id 二 "sidebox" 的 两 个 二 div 二 标签 。 
虽然 新 定义 的 一 div 之 标签 之 间 是 并 列 的 关系 ,但 都 处 于 id= "main" 的 二 div 之 标签 内 部 ， 
因此 它们 与 id="main" 的 DIV 形成 了 一 种 嵌 套 关系 。 






































container 
top 
Fboay> 
<div id="container"> mainbox Sidebox 
<div id="top"> 此 处 显示 id "top” 的 内 容 </div> 
<div id="main"> 
<div id="mainboxn> 此 处 显示 id "mainboxw 的 内 容 </div>| 
<div id="sidebox"> 此 处 显示 id "sideboxw 的 内 容 </div>| 
</div> 
<div id="foorer"> 此 处 显示 id "footer" 的 内 容 c/div> 
|</aiv> footer 
[</boady> eg 
图 3-29 赃 套 的 DIV 容器 的 页 面 结构 图 3-30 赃 套 的 DIV 容器 布局 示意 图 


3. 手动 创建 DIV 容器 

所 谓 手 动 创建 DIV 容器 ,是 指 直 接 在 Dreamweaver 的 代码 视图 中 输入 相关 标签 的 做 
法 ,这 种 创建 容器 的 方法 笔者 极力 推荐 。 虽 然 上 述 案例 中 使 用 Dreamweaver 提供 可 视 化 
创建 容器 的 方法 ,但 仅仅 是 针对 初学 者 ,而 在 实际 工作 中 ,直接 修改 源 代码 的 工作 效率 远 
远 高 于 可 视 化 的 方法 。 

为 了 让 读者 尽早 地 熟悉 和 掌握 各 类 标签 的 使 用 方法 ,本 书 约定 所 讲授 的 案例 中 采用 
“可 视 化 创建 容器 ?和 * 手 动 创建 容器 ?交替 进行 的 方法 来 实现 页 面 结构 。 


3.4 CSS 人 门 
HTML 5 和 CSS 3 将 改变 Web 世界 。 虽 然 W3C 目前 仍然 在 对 CSS 3 规范 进行 开 


发 ,但 这 并 不 影响 设计 师 对 它 的 使 用 ,因为 现在 的 浏览 器 已 经 实现 了 相当 多 的 CSS 3 属 
性 。 本 节 向 读者 介绍 有 关 CSS 3 的 基本 知识 。 


天 
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3.4.1 什么 是 CSS 


CSS(Cascading Style Sheet, 层 倒 样 式 表 ) 是 由 W3C( 万 维 网 联盟 ) 的 CSS 工作 组 创 
建 和 维护 的 。 它 是 一 种 不 需要 编译 ,可 直接 由 浏览 器 执行 的 置 标语 言 ,用 于 控制 Web 页 
面 的 外 观 。 通 过 使 用 CSS 样式 控制 页 面 各 元 素 的 属性 显示 ,可 将 页 面 的 内 容 与 表现 形式 
进行 分 离 。 

1. CSS 3 的 由 来 

CSS 有 多 种 版 本 ,CSS 1 是 1996 年 W3C 的 一 个 正式 规范 ,其 中 包含 最 基本 的 属性 
(如 字体 .颜色 和 空白 边 ) 。CSS 2 是 在 CSS 1 的 基础 上 增添 了 某 些 高 级 概念 (如 浮动 和 定 
位 ) 以 及 高 级 的 选择 器 (如 子 选择 器 、 相 邻 同 胞 选择 器 和 通用 选择 器 ) ,并 于 1998 年 作为 正 
式 规范 发 布 。CSS 3 是 CSS 2 技术 的 一 个 升级 版 本 , 它 将 以 前 的 规范 分 解 为 多 个 小 模块 
进行 管理 ,这 些 模 块 包括 盒子 模型 .列表 模块 . 超 链接 方式 ,语言 模块 .背景 和 边框 文字 特 
效 和 多 栏 布局 等 。 

2. CSS 在 网 页 设计 中 的 作用 

表现 与 结构 相 分 离 ,使 得 网 页 可 以 仅 由 内 容 组 成 ,而 将 所 有 网 页 的 风格 控制 指向 CSS 
样式 文件 ,示意 图 如 图 3-31 所 示 。 

一 个 或 多 个 CSS 文 档 


四 a *.html 文 档 漂亮 的 页 面 
- 
国 | wy 
国 


图 3-31 CSS 作用 示意 图 





这 样 做 的 好 处 表现 在 以 下 几 个 方面 。 

(1) 简化 了 网 页 的 格式 代码 ,外 部 样式 被 暂 存 在 浏览 器 缓存 中 ,加 快 了 显示 速度 。 

(2) 方便 网 页 风格 的 同时 更 新 ,缩短 更 新 和 维护 的 时 间 。 

(3) 由 于 代码 减少 ,汇总 起 来 能 够 节约 很 多 流量 ,这 样 便 间 接地 减少 了 服务 器 和 带宽 
的 费用 ,节约 资金 。 


汪 浊 3.4.2 CSS 语法 与 链接 方法 






1. CSS 语法 

CSS 语言 由 两 部 分 构成 : 一 部 分 是 选择 器 (selector) ; 另 一 部 分 是 一 
条 或 多 条 声明 。 这 里 声明 由 一 个 属性 (property) 和 一 个 属性 值 Cvalue) 
组 成 。 基 本 格式 如 下 。 


selector { property: value; } 
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选择 器 通常 是 需要 改变 样式 的 HTML 5 元 素 或 用 户 自 定义 的 ID 名 称 和 类 名 称 ; 属 
性 则 是 希望 设置 的 样式 属性 。 

例如 ,将 HTML 5 页 面 中 footer 元 素 的 内 容 居 中 ,字体 大 小 设置 为 12px( 像 素 ) ,其 
代码 如 下 。 


footer { 
text—align:center; 
font- size:12px; 

3 


在 这 个 例子 中 ,footer 是 选择 器 ,text-align 和 font-size 是 属性 ,center 和 12px 是 属性 值 。 


2. 链接 方法 

要 想 通 过 CSS 控制 页 面 元 素 的 外 观 , 必 须 将 CSS 文档 与 网 页 文档 建立 链接 。 方 法 有 
3 种, 即 内 联 样式 (Inline Style) 内 部 样式 (Internal Style Sheet) 和 外 部 样式 (External 
Style Sheet) 。 

1) 内 联 样式 

内 联 样式 是 混合 在 HTML 5 标签 中 使 用 的 ,这 种 方法 可 以 很 简单 地 对 某 个 元 素 单独 
定义 样式 。 例 如 : 

<p style="font- size:20px; "> 内 联 样 式 < /p> 

内 联 样式 仅 作用 于 当前 元 素 p, 其 他 段落 元 素 不 受 其 影响 。 

2) 内 部 样式 

内 部 样式 是 把 样式 表 放 到 页 面 的 二 head 二 区 域内 ,这 种 链接 方式 决定 了 该 样式 表 将 
作用 于 本 页 面 ,不 能 控制 其 他 页 面 。 例 如 : 

<head> 

<meta charset= "utf- 8"> 

<title> 内 部 样式 < /title> 

< style type= "text/css"> 

body { background: # FF0; } 

</style> 

< /head> 

3) 外 部 样式 

外 部 样式 是 把 CSS 单独 写 到 一 个 CSS 文 件 内 ,然后 在 源 代码 中 以 link 方式 链接 , 书 
写 在 二 head 一 区 域内 。 它 的 好 处 是 不 仅 本 页 可 以 调用 ,其 他 页 面 也 可 以 调用 ,这 种 处 理 方 
式 是 实际 工作 中 最 常用 的 一 种 形式 。 例 如 : 


< link href="style/div.css" rel="stylesheet" type= "text/css" /> 


【案例 3-8】 CSS 语法 。 
OO 打开 Dreamweaver CS6 ,新 建 HTML 5 网 页 。 
@ 单 击 “ 拆 分 ”按钮 ,切换 为 拆 分 视图 ,在 界面 左 侧 的 代码 视图 中 书写 以 下 代码 。 


< !doctype html> 


SN 


六 
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<html> 
<head> 
<meta charset="utf-8"> 
<title>C5S 语法 </title> 
<style type="text/css"> 
body {background: #FF0;} /* 设置 页 面 背景 色 为 黄色 * / 
hl {color: blue;} /* 设置 标题 为 蓝 色 * / 


a {font-family: "微软 雅 黑 ";} /* 设置 超 链接 字体 * / ”网 处 部 为 h! 元 素 编 写 了 CSS 
规则 ， 但 实际 预览 效果 仅 显 


示 为 一 种 ， 这 说 明 内 联 样 式 
的 优先 级 高 于 内 部 样式 


</style> 
</head> 
<body> 
<header> 
<hl style="color:red;">CSS 语法 练习 (这 里 的 字体 为 红色 )< /hl> 
<nav> 
<ul> 
<1i><a href="#"> 首 页 </a></1i> 
<li><a href="#"> 语 法 </a></1i> 
<1i><a href="#"> 测 试 </a></1i> 
</u1l> 
</nav> 
</neader> 
</body> 
</html> 


@ 保存 本 网 页 后 ,通过 浏览 器 预览 ,其 效果 如 图 3-32 所 示 。 


也 css 笨 法 
«lal 


CSS 语 法 练习 (这 里 的 字体 为 红色 ) 


首页 


。 首页 
。 语 法 
。 测 二 





图 3-32 案例 3-8 的 预览 效果 


号 加 3.4.3 盒子 模型 


盒子 模型 (Box Model) 是 CSS 控制 页 面 时 的 重要 概念 , 它 指定 了 元 素 如 
何 显示 以 及 如 何 相互 交互 。CSS 3 标准 里 引入 了 一 些 新 盒子 模型 的 参数 ,使 
设计 者 在 CSS 2 的 基础 上 能 更 灵活 地 调整 页 面 上 各 个 容器 的 大 小 和 位 置 。 
在 网 页 设计 中 ,页 面 中 的 每 个 元 素 可 以 理解 为 一 个 矩形 框 , 这 个 矩形 框 由 元 素 的 内 容 


(contet) ,内 边 距 (padding) ,边框 (border) 和 外 边 距 (Cmargin) 组 成 ,示意 图 如 图 3-33 所 示 。 


对 于 盒子 模型 的 相关 属性 可 以 这 样 理 解 ,假如 用 户 购买 了 一 台 冰 箱 ,那么 冰箱 对 应 的 





就 是 网 页 中 的 实际 内 容 , 冰 箱 外 面包 庄 的 塑料 泡沫 对 应 的 就 是 内 边 距 (padding) ,包装 冰 
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内 
辣子 模 2 反 宽度 
图 3-33 盒子 模型 





箱 的 纸 盒子 对 应 的 就 是 边框 (border) ,如 果 多 台 冰 箱 放 在 一 起 ,冰箱 与 冰箱 之 间 的 距离 对 
应 的 就 是 外 边 距 (margin) 。 

【案例 3-9】 盒子 模型 。 

@ 打开 Dreamweaver CS6 ,新 建 HTML 5 网 页 ,并 在 二 body 二 与 一 /body 二 标签 内 
部 增加 以 下 代码 。 

<div id= "boxl">boxl< /div> 

<div id= "box2"> box2< /div> 

@ 在 当前 页 面 的 二 head 盖 与 二 /head 盖 标签 中 嵌入 内 部 样式 ,样式 代码 如 下 。 


< style type= "text/css"> 
#boxl { 


/i* 设置 边框 为 红色 实 线 外 观 ， 宽度 为 5px* / 
margin- bottom: 10px; 所 了》 CGC D file:///E:/ 编 后 | 三 





} 
#box2 { 
width: 50px; 
height: 50px; 
Padding: 10px; 
border: #F00 solid Spx; 
margin: 10px; 
} 
</style> 


@ 保存 本 网 页 后 ,通过 浏览 器 预览 .其 效果 如 
图 3-34 所 示 。 图 3-34 案例 3-9 的 预览 效果 








区 
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需要 注意 的 是 ,boxl 实际 的 高 度 为 130px(5px 十 10px 十 100px 十 5px 十 10px),box2 
实际 的 高 度 为 100px(10px 十 5px 十 10px 十 50px 十 10px 十 5px 十 10px) 。 


1. border-radius 属性 

在 CSS2 中 ,设计 师 为 了 实现 圆 角 设计 ,需要 花费 更 多 的 时 间 。 在 CSS 3 中 则 可 以 直 
接 使 用 border-radius 属性 创建 圆 角 边框 。 该 属性 可 以 包含 两 个 参数 : 第 一 个 值 表 示 圆 角 
的 水 平 半 径 ,第 二 个 值 表 示 圆 角 的 垂直 半径 ,其 标准 的 书写 方式 为 "border-radius:10px/ 
20px;”, 如 果 水 平 半径 和 垂直 半径 相同 ,也 可 以 书写 为 *border-radius:10px;”。 

此 外 ,如 果 想 要 为 矩形 设置 4 个 不 同 的 圆 角 半径 , 则 不 能 使 用 斜 杠 方式 来 定义 规则 ， 
而 是 要 书写 为 “border-radius:10px 20px 30px 40px;”。 

2. box-shadow 属性 

在 CSS 3 中 ,box-shadow 属性 用 于 向 方 框 添 加 阴影 。box-shadow 属性 的 使 用 方法 如 下 。 

box- shadow: length length length color; 

其 中 ,前 3 个 length 分 别 指 阴 影 离开 对 象 的 横向 距离 .阴影 离开 对 象 的 纵向 距离 、 阴 
影 离 开 对 象 的 模糊 半径 ,而 color 指 的 是 阴影 的 颜色 。 

3. border-image 属性 

CSS 3 的 border-image 属性 ,可 以 方便 设计 师 使 用 图 片 来 创建 边框 。 该 属性 会 让 浏 
览 器 在 显示 图 像 边框 时 ,自动 将 所 使 用 的 图 像 分 割 为 9 部 分 进行 处 理 , 不 再 需要 设计 师 人 
工 处 理 。 


border-image 属性 标准 的 使 用 方法 如 下 。 一 一 一 一 一 一 一 
| 1 

border- image: url (图 像 的 路 径 ) ABCD 茹 入 区 

其 中 ,A、B.C.D 四 个 参数 表示 浏览 器 对 图 像 分 割 时 的 上 边 | 2 .| | B 


距 、 右 边 距 、 下 边 距 和 左边 距 , 如 图 3-35 所 示 。 | 
【案例 3-10】 盒子 模型 相关 属性 。 
OD 打开 Dreamweaver CS6 ,新 建 HTML 5 网 页 ,并 在 一 body 二 
与 二 /body 二 标签 内 部 增加 以 下 代码 。 





| 








图 3-35 参数 示意 图 


<div id= "boxl" class= "box">boxl< /div> 
<div id= "box2" class= "box"> box2< /div> 
<div id= "box3" class= "box"> box3< /div> 


@ 在 当前 页 面 的 二 head 记 与 二 /head 二 标签 中 骨 入 内 部 样式 ,样式 代码 如 下 。 


<style type= "text/css"> 
-box { 
width: 100px; 
height: 100px; 
padding: 10px; 
border: #F00 solid 26px; /* 这 里 边框 设置 为 26 像 素 */ 
margin- bottom: 20px; 
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#boxl { 
border- radius: 40px/30px; /* 设 置 盒子 贺 角 边框 * / 
box- shadow: 10px 10px 10px gray; /* 设置 阴影 效果 和 阴影 颜色 * / 
} 
#box2 { 
border- radius: 20px 30px 60px 80px; /* 设置 盒子 圆 角 边框 * / 
box- shadow: 10px 10px 0 gray; /* 设 置 阴影 效果 和 阴影 颜色 x / 
} 
#box3 { 
border- image: url (border.png) 26 26 26 26; 
} /* 设置 盒子 边框 图 像 * / 
< /style> 


@ 保存 本 网 页 后 ,通过 浏览 器 预览 ,其 效果 如 图 3-36 所 示 。 





图 3-36 ”案例 3-10 的 预览 效果 


3.5 和 常见 的 CSS 选择 器 


选择 器 是 CSS 的 重要 内 容 , 使 用 它 可 以 大 幅度 提高 开发 人 员 修改 样式 的 工作 效率 。 
由 于 选择 器 的 内 容 非常 多 ,本 节 将 介绍 CSS 2 中 常见 的 选择 器 ,以 及 CSS 3 中 部 分 新 增 的 
选择 器 ,而 选择 器 的 更 多 内 容 将 在 后 续 章 节 中 配合 案例 进行 介绍 。 

目前 ,大 多 数 网 站 的 开发 人 员 习惯 使 用 元 素 的 class 属性 服务 于 样式 ,而 class 属性 可 
以 使 用 在 文本 框 中 ,也 可 以 使 用 在 按钮 中 ,这 样 在 洋洋 洒洒 的 CSS 代码 中 显得 非常 混乱 ， 
修改 样式 时 也 不 方便 。 在 CSS 3 中 ,倡导 使 用 选择 器 来 将 样式 与 元 素 直接 绑 定 ,这 样 在 样 
式 表 中 什么 样式 与 什么 元 素 相 匹配 就 变 得 一 目 了 然 了 。 不 仅 如 此 ,开发 人 员 还 可 以 通过 
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选择 器 实现 各 种 复杂 的 指定 ,同时 减少 样式 表 的 代码 书写 量 
加 3.5.1 通配符 选择 器 与 类 型 选择 器 

1. 通配符 选择 器 

通配符 选择 器 用 * ”表示 ,用 于 清理 标签 的 默认 样式 。 如 果 单 独 使 
用 ,其 作用 范围 是 页 面 中 所 有 元 素 。 而 在 实际 工作 中 ,由 于 通配符 选择 
器 比较 耗费 资源 ,所 以 不 提倡 直接 使 用 该 选择 器 。 

2. 类 型 选择 器 

类 型 选择 器 是 指 以 网 页 中 已 有 标签 类 型 作为 名 称 的 选择 器 ,如 body header 和 pb 等 。 

【案例 3-11】 通配符 选择 器 与 类 型 选择 器 。 

@ 打开 Dreamweaver CS6 ,新 建 HTML 5 网 页 ,并 在 一 body 过 与 一 /body 之 标签 内 
部 增加 以 下 代码 。 

<h2> 通 配 符 选 择 器 与 类 型 选择 器 < /h2> 


<p> (1) 通配符 选择 器 用 “ * "表示 ,用 于 统一 标签 的 默认 样式 。< /p> 
<p> (2) 类 型 选择 器 是 指 以 网 页 中 < span> 已 有 标签 类 型 < /span> 作 为 名 称 的 选择 器 。< /p> 


@ 在 当前 页 面 的 二 head> 与 二 /head> 标 签 中 嵌入 内 部 样式 ,样式 代码 如 下 。 





< style type= "text/css"> 


| 
margin: 0; 
padding: 0; 
border: 0; 
} /* 初始 化 页 面 所 有 标签 的 默认 样式 * / 
h2 {font- family: "黑体 ";} /* 设 置 标题 字体 为 黑体 一 一 类 型 选择 器 * / 


p* {font- size: 30px;} 
/* 设 置 <p> 标 签 内 的 所 有 元 素 字体 大 小 为 30px 一 一 类 型 选择 器 与 通配符 选择 器 的 混合 使 用 x / 


</style> 
@ 保存 本 网 页 后 ,通过 浏览 器 预览 ,其 效果 如 及 amsssasxms x 
图 3-37 所 示 。 EscCla 
3.5.2 ID 选择 器 与 类 选择 器 en 


1. ID 选择 器 (2) 类 型 选择 器 是 指 以 网 页 中 忆 有 标 
ID 选择 器 书写 时 以 *# ” 开 | 签 类 型 作为 名 称 的 选择 器 。 
头 。 对 于 一 个 HTML 5 文档 来 
说 ,其 中 的 每 一 个 标签 都 可 以 使 ”图 #37 案例 $11 的 预览 效果 
用 id=="" 的 形式 进行 一 个 名 称 指 
派 , 但 需要 注意 的 是 ,文件 中 id 属性 具有 唯一 性 是 不 可 以 重复 的 。 
2. 类 选择 器 
类 选择 器 通过 直接 引用 元 素 中 类 属性 的 值 而 产生 效果 ,这 个 应 用 前 面 总 是 有 一 个 句 
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点 “.”, 这 个 句点 用 来 标识 一 个 类 选择 器 ,类 名 可 以 随意 命名 ,但 最 好 根据 元 素 的 用 途 来 定 
义 一 个 有 意义 的 名 称 。 

ID 选择 器 与 类 选择 器 最 大 的 区 别 在 于 ,前 者 定义 的 CSS 规则 , 仅 作用 于 一 个 元 素 ， 
而 后 者 定义 的 CSS 规则 ,可 以 同时 作用 于 不 同类 别 或 多 个 元 素 。 

【案例 3-12】 ID 选择 器 与 类 选择 器 。 

Q@ 打开 Dreamweaver CS6 ,新 建 HTML 5 网 页 ,并 在 一 body 二 与 一 /body 二 标签 内 
部 增加 以 下 代码 。 

<div id- "box 1"> 

<p> ID 选择 器 是 以 “# "开头 ,每 个 标签 都 可 以 使 用 < span class= "size"> id= ""< /span> 的 形式 
进行 一 个 名 称 指派 。< /p> 
</div> 


<div class="size" > 


<p> 类 选择 器 通过 直接 引用 元 素 中 类 属性 的 值 而 产生 效果 ,这 个 应 用 前 面 总 是 有 一 个 句点 
“A 
</div> 


@ 在 当前 页 面 的 二 head> 与 二 /head> 标 签 中 嵌入 内 部 样式 ,样式 代码 如 下 。 


< style type= "text/css"> 


#box 1 { 

width: 400px; 

border: 5px #03F solid; 
} /* 创建 名 为 pox_1 的 规则 ,设置 宽度 ,增加 蓝 色 边框 。* / 
.size { 


font- size: 24px; 
font- style:italic; 


/* 创建 名 为 size 的 类 规则 ,改变 字体 大 小 ,并 设置 为 斜体 。* / 


</style> 


@ 保存 本 网 页 后 ,通过 浏览 器 预览 ,其 效果 如 图 3-38 所 示 。 








闫 六 大 器 让 过 自 检 引用 元 贡 中 类 层 侨 1 
入 TW 产 竺 放生 ， 间 个 三 用 及 而 站 
1 2/ 局.，。 





3-38 ID 选择 器 与 类 选择 器 的 预览 效果 
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加 3.5.3 包含 选择 器 与 群 组 选择 器 

1. 包含 选择 器 

当 用 户 想 要 选取 X 元 素 下 的 子 元 素 立 时 ,包含 选择 器 就 能 发 挥 作 
用 。 这 种 方式 的 选择 器 将 选取 其 下 所 有 匹配 的 子 元 素 , 且 忽视 层级 关 
系 ,示例 代码 如 下 。 

li a {text- decoration:none;} /* 此 规则 作用 的 对 象 是 1 元 素 所 包含 的 a 元 素 * / 





2. 群 组 选择 器 

当 用 户 需要 对 一 组 不 同 的 标签 进行 相同 样式 的 指派 时 , 群 组 选择 器 就 派 上 了 用 场 。 
群 组 选择 器 使 用 逗号 对 选择 器 进行 分 隔 , 这 样 书写 的 优点 在 于 同样 的 样式 只 须 书写 一 次 ， 
减少 了 代码 书写 量 , 示 例 代 码 如 下 。 

body,ul, li,a,p{margin:0;padding:0;} /* 此 规则 将 作用 于 多 个 元 素 上 面 * / 

【案例 3-13】 包含 选择 器 与 群 组 选择 器 。 

OQ@ 打开 Dreamweaver CS6 ,新 建 HTML 5 网 页 ,并 在 二 body 二 与 二 /body 二 标签 内 
部 增加 以 下 代码 。 

<hl> 这 里 是 <hl> 标 签 内 的 < span> 文 字 < /span>< /hl> 

<p> 这 里 是 <p> 标 签 内 的 文字 < /p> 


<p class= "myclass"> 这 里 是 带 有 myclass 类 属性 的 <p> 标 签 内 的 文字 < /p> 
<div id= "main"> 这 里 是 带 有 id 属性 的 div 元 素 内 的 文字 < /div> 


@ 在 当前 页 面 的 生 head> 与 二 /head> 标 签 中 嵌入 内 部 样式 ,样式 代码 如 下 。 


< style type= "text/css"> 








body, hl， PT 
margin: 07 
padding: 0; 
} /* 群 组 选择 器 ,常用 于 页 面 元 素 初始 化 * / 
hl span {font- size: 30px;} /* 设置 字体 大 小 一 一 包含 选择 器 * / 
hl, p, .myclass, #main { 
font- size: 16px; 
border: 2px solid #F00; 
margin- bottom: 10px; 
} /* 设置 字体 大 小 和 边框 ,以 及 盒子 模型 相关 属性 一 一 群 组 选择 器 * / 
</style> 
@ 保存 本 网 页 后 ,通过 浏览 器 预览 ,其 eT en 
效果 如 图 3-39 所 示 。 6 良 CD fle///E/ 编 号 书籍 | 交 | 三 
3.5.4 属性 选择 器 时 是 < > 村 和 内 的 文字 











a] 里 是 <p > 标签 内 的 文字 
属性 选择 器 可 以 根据 各 

纪 ”对象 是 否 具 有 某 个 属性 ， 
二 史 或 者 该 属性 是 否 有 某 个 特 















图 3-39 包含 选择 器 与 群 组 选择 器 的 预览 效果 
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定 值 来 决定 是 否 要 应 用 样式 。 在 CSS 3 中 ,增加 了 3 个 属性 选择 器 ,这 使 得 属性 选择 器 有 
了 通配符 的 概念 。 下 面 是 CSS 2 和 CSS 3 中 常见 的 属性 选择 器 ,其 中 ,E 表示 选择 器 (可 
以 省 略 不 写 ) ;attr 表示 属性 名 称 ;val 表示 属性 值 。 

E[attr]: 选择 所 有 包含 attr 属性 的 元 素 ( 无 论 值 如 何 ) 。 

E[attr 二 val]: 选择 所 有 包含 attr 属性 , 且 attr 值 为 val 的 元 素 。 

E[attr 王 val]: 选择 所 有 包含 attr 属性 , 且 attr 值 以 val 开头 的 元 素 。 

E[attr$ 一 val]: 选择 所 有 包含 attr 属性 , 且 attr 值 以 val 结束 的 元 素 。 

ELattr x 一 val]: 选择 所 有 包含 attr 属性 , 且 attr 值 中 包含 val 的 元 素 。 

【案例 3-14】 属性 选择 器 。 

OO 打开 Dreamweaver CS6 ,新 建 HTML 5 网 页 ,并 在 一 body 二 与 二 /body 二 标签 内 
部 增加 以 下 代码 。 


<hl> 属 性 选择 器 < /hl> 
<nav id= "yzl"> 演 示 文 本 yzl 
<ul> 
<1i><a href- "Word 文 档 .docx">Word 文 档 < /a>< /1i> 
<1i><a href="PPT 文 档 .pptx"> PPT 文 档 </a></li> 
</ul> 
</nav> 
<div id= "yz2"> 演 示 文 本 yz2< /div> 
<div id= "subyz2- 1"> 演 示 文 本 subyz2- 1< /div> 
<div id= "subyz2- 2"> 演 示 文 本 subyz2- 2< /div> 


@ 在 当前 页 面 的 二 head> 与 王 /head 标签 中 嵌入 内 部 样式 ,样式 代码 如 下 。 


< style type= "text/css"> 
1i {list- style: none;} /* 清除 列表 的 默认 样式 * / 
a[hrefS$ = "docx"] { 
background: url (doc.png) no- repeat left center; 
padding- left: 25px; 
和 /* 匹配 href 属性 中 ,以 docx 结尾 的 元 素 ,为 其 设置 缩 进 和 背景 图 像 * / 
a[lhref$ = "pptx"] { 
background: url (ppt .png) no- repeat left center; 
padding- left: 25px; 
} /* 匹配 href 属性 中 ,以 pptx 结尾 的 元 素 ,为 其 设置 缩 进 和 背景 图 像 * / 
[id= yz1] { background:# FC0;} 
/* 匹配 id 属性 中 属性 值 为 yz1 的 元 素 ,设置 背景 色 为 橙色 x / 
[idx =yz] { color:red;} 
/* 匹配 ia 属性 中 包含 指定 字符 yz 的 所 有 元 素 ,设置 文本 颜色 为 红 
色 */ 
[id^= sub] { font- size:24px;} 
/#* 匹配 id 属性 中 以 字符 sub 开头 的 元 素 , 设 置 字体 大 小 为 24 像素 * / 
[ids =\-2] { font- style:italic;} 
/* 匹配 id 属性 中 以 指定 字符 “- 2 结尾 的 元 素 , 设 置 字体 为 斜体 * / 


</style> 


@ 保存 本 网 页 后 ,通过 浏览 器 预览 ,其 效果 如 图 3-40 所 示 。 


/ 


A 
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6 六 C |D filey//E:/ 编 号 忆 舞 妇 | 三 
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图 3-40 属性 选择 器 的 预览 效果 


3.6 ”过 程 指导 一 一 淘宝 店铺 周年 庆 专 题 页 面 


本 节 将 使 用 Dreamweaver CS6 软件 ,结合 相关 的 CSS 基本 内 容 , 向 读者 详细 介绍 网 
页 前 端 设 计 师 是 如 何 将 效果 图 转化 为 网 页 的 ,请 读者 着 重 体会 从 创建 页 面 到 制作 完成 的 
整个 过 程 。 


3.6.1 过 程 分 析 


本 节 的 任务 是 完成 “淘宝 店铺 周年 庆 专 题 页 面 "的 制作 ,其 最 终 页 面 效 果 如 图 3-41 所 
示 。 该 网 站 以 周年 店庆 为 主题 ,选择 红色 作为 基本 色 , 从 页 面 整个 布局 来 看 ,可 以 分 为 头 
部 区 域 .banner 区 域 . 主 体内 容 区 域 和 底部 的 版 权 区 域 。 其 中 主体 内 容 区 域 又 包含 4 个 
活动 内 容 。 通 过 对 页 面 的 仔细 观察 以 及 成 熟 的 思考 ,将 页 面 的 布局 规划 图 展示 出 来 ,如 
图 3-42 所 示 。 


3.6.2 步骤 详解 


1. 创建 站 点 

(1) 启动 Dreamweaver CS6 ,执行 “站 点 ”一 新 建站 点 ”命令 ,显示 “站 点 设置 对 象 " 对 
话 框 ,如 图 3-43 所 示 。 

(2) 在 此 对 话 框 左 侧 列表 中 选择 “站 点 ”选项 ,并 在 右 侧 “站 点 名 称 ” 文 本 框 中 输入 “ 淘 
宝 店 铺 周年 庆 专题 网 页 ”, 然 后 单 击 贸 按钮 ,为 本 地 站 点 文件 夹 选择 存储 路 径 。 最 后 , 单 
击 “ 保 存 ” 按 钮 ,完成 本 地 站 点 的 创建 。 

(3) 在 “文件 ”面板 中 站 点 根 目录 下 分 别 创建 用 于 放置 图 片 的 images 文件 夹 和 放 先 
CSS 文 件 的 style 文 件 夹 。 

(4) 将 所 需 图 片 素材 复制 到 站 点 的 images 文件 夹 内 ,如 图 3-44 所 示 。 
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图 3-41 淘宝 店铺 周年 庆 专 题 页 面 预览 效果 图 3-42 淘宝 店铺 周年 庆 专题 页 面 
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您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 夹 和 名 称 。 
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art_l. jpe 
rt_2. jpe 
art_3. jpe 
art_4. jpe 
banner bg jpg 121KB MCDSee. 
header. jpg 26KB ACDSee... 
re_header_bg jpe 
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图 3-44 创建 文件 夹 


2. 创建 空白 文档 

(1) 执行 菜单 栏 中 的 “文件 ”一 "新建" 命令, 显示 “新 建文 档 ” 对 话 框 。 

(2) 选择 对 话 框 左 侧 的 “空白 页 "类别, 从 “页 面 类 型 " 列 中 选择 HTML 类 型 ,然后 在 
“布局 ” 列 中 选择 “无 ”类 型 。 

(3) 在 “文档 类 型 "下 拉 列 表 框 中 选择 HTML 5 选项 ,如 图 3-45 所 示 。 最 后 单 击 “ 创 
建 "按钮 , 即 可 创建 一 个 空白 文档 。 
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图 3-45 设置 文档 类 型 
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(4) 将 该 网 页 保存 在 根 目录 下 ,并 重 命名 为 index. html, 如 图 3-46 所 示 。 


3. 创建 CSS 文档 

(1) 执行 菜单 栏 中 的 “文件 ”>“ 新 建 "命令 ,显示 “新 建文 档 ” 对 话 框 。 

(2) 选择 对 话 框 左 侧 的 “空白 页 "类别, 从 “页 面 类 型 " 列 中 选择 CSS 类 型 ,然后 单 击 
“创建 ”按钮 , 即 可 创建 一 个 CSS 空白 文档 。 

(3) 将 此 外 部 CSS 文档 保存 在 style 文件 夹 下 ,并 重 命名 为 style. css, 如 图 3-47 
所 示 。 
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图 3-46 新建 空白 网 页 图 3-47 创建 CSS 文档 


4. 将 CSS 文档 链接 至 页 面 

(1) 打开 index. html 文档 ,在 Dreamweaver CS6 中 执行 “窗口 ">“CSS 样式 ”命令 ， 
打开 “CSS 样式 ?面板 , 单 击 面板 底部 的 呈 按钮 .此 时 弹出 “链接 外 部 样式 表 ” 对 话 框 。 

(2) 在 此 对 话 框 中 , 单 击 * 浏 览 ?按钮 ,将 外 部 样式 文件 style. css 链接 到 index. html 
页 面 中 ,如 图 3-48 所 示 。 

(3) 此 时 ,软件 界面 显示 两 个 文件 已 经 链接 ,如 图 3-49 所 示 。 用 户 单 击 某 个 文件 ,可 
以 在 这 两 个 文档 之 间 相 互 切换 。 





文件 /URL OE): styleystyle css 














添加 为 : 回 镑 接 L) 发 
OSAD 
媒体 虽 : 
您 也 可 以 输入 运 号 分 隔 的 媒体 类 型 列表 。 一 一 一 一 
| Dresnwearer 的 范例 栏 式 去 可 以 帮助 你 起步。 -一 头巾 一 style css 
3-48 将 CSS 文档 链接 至 页 面 图 3-49 两 个 文件 已 经 成 功 链接 


5. 页 面 初始 化 
进入 style. css 的 编辑 状态 ,创建 初始 化 规则 ,其 CSS 规则 内 容 如 图 3-50 所 示 。 
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pa 6. 页 面 后 续 制作 
(1) 在 index. html 文件 的 源 代码 编辑 状态 中 ,手动 创建 如 图 3-51 所 示 的 页 面 基本 结 
构 。 这 里 建议 手动 创建 的 目的 是 希望 读者 熟知 页 面容 器 相互 谋 套 的 结构 和 各 种 元 素 的 使 














用 方法 。 

wk 
margin: 0; [<body> 
padding: 0; |<header id="page header"> 
border: 0; <h1> 宇 泽 电 器 专营 店 </h1> 

} </header> 

body { <aiv id="banner"></div> 
width; 100$;/* 设 置 页 面 宽度 为 浏览 器 宽度 的 100%*/ |<section> </section> 
color: #FFF; <foorer id="page footer"> 
font-size: 16px; <p>Ecopy;2015 AwesomeCo.</P:; 
font-family: "微软 雅 黑 "; <p> 店 铺设 计 : 宇 泽 互联 </p> 
background: #b70707;:/* 设 置 背景 色 */ |</fo0ter> 

} (</body> 

图 3-50 页 面 初始 化 规则 图 3-51 页 面 基 本 结构 


(2) 进入 style. css 的 编辑 状态 ,创建 相关 容器 的 CSS 规则 ,如 图 3-52 所 示 。 


Page header 【 
margin: 0 auto;/* 设 置 当 前 容器 水 平 居中 */ 
width: 950px;/* 该 宽度 与 载 入 图 片 宽度 相同 */ 
height : 103px;/* 该 高 度 与 载 入 图 片 高 度 相同 */ 
background: url(../images/header.jpg) no-repeat;/* 设 置 载 入 图 片 的 地 址 */| 





) 
#page_header hl ( text-indent: -9999px;/* 将 文字 隐藏， 有 利于 搜索 优化 */ ) 
#banner { 
margin: 0 auto; hela 
background: url(../imat banne: nter no-repeat 
width: 100%;/% 二 应 设置 为 响 吕 宙 度 。/ 
height: 500pxz 
》 
#page_footer { 
width: 950px; 
margin:10px auto;/* 设 置 当前 容器 水 平 居中 ， 且 距离 其 他 容器 上 下 距离 为 0 像素 */ 
text-align: center;/* 设 置 版 权 内 容 居中 */ 





; 





图 3-52 页 面 基本 结构 的 CSS 规则 


(3) 保存 当前 页 面 ,预览 后 的 效果 如 图 3-53 所 示 。 

(4) 进入 index. html 文件 的 源 代码 编辑 状态 ,在 二 section 王 和 二 /section 二 之 间 插 入 
相关 页 面 代码 ,如 图 3-54 所 示 。 

(5) 进入 style. css 的 编辑 状态 ,创建 相关 容器 的 CSS 规则 ,如 图 3-55 所 示 。 保 存 当 
前 页 面 , 预 览 后 即 可 看 到 最 终 效 果 。 

说 明 : 

(1) 本 节 详 细 叙 述 了 网 页 制作 的 工作 过 程 , 其 中 的 CSS 规则 中 有 很 多 属性 初学 者 难 
以 理解 。 这 里 重点 不 是 让 读者 一 次 性 记忆 这 么 多 属性 ,而 是 让 读者 熟悉 这 种 制作 网 页 的 
工作 方式 。 

(2) Dreamweaver CS6 并 非 没 有 可 视 化 插入 各 类 容器 的 方法 ,本 节 强 调 手动 输入 代 
码 的 过 程 , 是 希望 读者 养 成 手动 输入 代码 的 习惯 ,为 后 期 能 力 提高 打下 基础 。 
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图 3-53 ”当前 页 面 效 果 








eectiony 
<header clasg="re_header"> 洁 柜 推荐 </header> 
<article id="art 1"> 
<div class="content left"> 
<p>42 寸 LED 智 能 3D 电 视 </p> 
<p> 掠 品质 感 明星 之 选 </p> 
<p>Android4 .0 全 开 旅 平台 </p> 
<p> 金 山 云 存 储 ， 畅想 云 油 生 活 </p> 
<p> 语 音 精灵 2 .0</p> 
</div> 
</article> 
<article ide"art 2"> 
<div class="content right"> 
<p>TOUCH 智 能 控制 </p> 
<p> 原 生态 Android4.0</p> 
<p> 内 置 nIFI</p> 
<p> 语 音 精灵 2 .0</p> 
</div> 
</article> 
<header class="re_header">TCL 推 荐 </header> 
<article id="art_3"> 
<div class="content right"> 
<p> 一 屏 双 显 各 得 其 乐 </p> 
<p>Android4.0+ 操 作 系统 </p> 
<p> 无 边框 设计 ， 视 野 更 广 </p> 
</div> 
</article> 
<article id-"art 4"> 
<div class="content left"> 
<p>50 寸 LED 智 能 3D 电 视 </p> 
<p> 多 屏 互 动 ， 全 能 浏览 器 </p> 
<p> 至 苯 蓝 光 ，AI 变 频 系统 </p> 
<p> 魔 方 影音 ， 音 画 同 步 </p> 
</div> 
</article> 
K/section> 

















width: 950px; 
height: Sopx; 

margin: 10px auto 

background: url(../images/re header bg.jpg) no-repeat 
rext-align: center;/* 设 置 文字 水 平 居中 */ 

font-size: 30px;/" 设 置 文字 大 小 */ 

line-height: 50px:/* 设 置 行 高 ， 使 得 文字 委 直 居中 */ 


width: 950px: 
height: 40Spx; 

margin: 10px auto 

background: url(../images/art_1.jpg) no-repeat; 


color: #502828 
padding-top: 160px 
Padding-left: 200px; 


width: 950px 

height: 405px; 

margin: 10px auto 

background: urll(../images/art 2.jpg) no-repeat; 





color: #502828 
padding-top: 190px 
Padding-left: S570px; 


fart 
width: 950px 
height: 405px; 
margin: 10px auto 
background: url(../images/art_3.jpg) no-repeat; 


width: 950px; 

height: 405px; 

margin: 10px auto 

background: url(../images/art_ 4.jpg) no-repeat; 











图 3-54 在 section 元 素 内 插入 代码 


图 3-55 ”section 元 素 内 各 元 素 的 CSS 规则 


vA | 
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3.7 自主 任务 一 一 中秋 茶 相 伴 ? 淘 宝 店铺 专题 销售 页 面 


通过 3. 6 节 的 案例 制作 ,读者 了 解 和 掌握 了 创建 网 页 文件 的 工作 流程 。 通 过 本 节 实 
训 的 训练 ,可 以 进一步 掌握 CSS 布局 页 面 的 方法 ,页 面 最 终 效 果 如 图 3-56 所 示 ,布局 如 
图 3-57 所 示 。 





| header id="page_header" 








| div id="nav™ 








section id="content” 


div id="con_head” 





div id="con_main" 





div id="col_1" 





div id="col_ 2" 








div id="col 3" 





























footer id="page_footer" 





图 3-56 “中 秋 茶 相伴 ”页 面 预览 效果 图 3-57 “中 秋 茶 相伴 ”页 面 布 局 示意 图 


3.8 习题 


1. Dreamweaver CS6 的 常用 功能 面板 主要 包括 哪些 内 容 ? 

2. 什么 是 设计 视图 .代码 视图 和 拆 分 视图 ? 

3. 将 CSS 文档 链接 到 页 面 的 方法 有 哪些 ? 

4. 简 述 盒子 模型 。 

5. CSS 为 开发 者 提供 了 多 样 的 选择 器 ,属性 选择 器 ELattr$ 二 val] 的 含义 是 
什么 ? 

6. 在 本 地 计算 机 中 创建 名 称 为 My Web 的 站 点 ,并 在 该 站 点 内 创建 名 为 images 和 
style 的 文件 夹 ;在 站 点 内 部 创建 index. html 和 div. css 文件 ,并 将 这 两 个 文件 链接 起 来 ; 
向 站 点 image 文件 夹 内 复制 多 张 图 像 ,练习 移动 ,删除 .粘贴 等 操作 。 

7. 观察 图 3-58 所 示 的 网 页 ,分 析 其 中 的 布局 ,运用 本 章 知识 将 该 网 页 制作 出 来 。 
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热 腾 插 的 。 水 滚 着 ， 像 好 些 鱼 眼睛 ， 一 小 块 一 小 块 豆 认 养 
气 炉 ) 上， ET 导 和 和 这 


不 大 见 人 3 汪汪 
两 只 的 乌 
准 。 我 们 住 在 楼 上， 书房 从 站 大 路 ; 路 上 有 人 可 以 清 ; 
听 起 来 还 只 当 远 风 送 来 的 ， A Ly 了 
们 分 儿 们 守 着 。 外 壹 呈 考 是 冬天 ， 家 里 却 老 是 ; 
们 和 看 天 上 人 人 


Copyright © 2015 字 泽 豆 联 Al Rights Reserved 





图 3-58 习题 7 图 
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文本 与 图 像 


【本 章 导读 】 

网 页 中 的 文本 是 传递 信息 的 主要 途径 ,而 图 像 又 是 吸引 访问 者 不 可 或 缺 的 基本 要 素 。 
本 章 主 要 向 读者 介绍 网 页 中 文本 元 素 和 图 像 元 素 的 编辑 方法 ,以 及 如 何 使 用 CSS 规则 控 
制 页 面 中 的 文本 和 图 像 ,使 之 呈现 出 多 样 的 外 观 。 

【学 习 目标 】 

如 掌握 编辑 文本 和 超 链接 的 基本 操作 ; 

如 认 知 并 熟练 应 用 CSS 控制 文本 的 外 观 ; 

名 掌握 插入 图 像 的 基本 操作 ,以 及 与 图 像 相 关 的 CSS 属性 ; 

名 能够 熟练 运用 CSS 的 内 容 实现 图 文 混 排 效 果 。 


4.1 文本 


网 页 中 包含 信息 最 多 的 就 是 文本 ,对 文本 进行 良好 的 控制 和 美化 ,是 决定 网 页 是 否 美 
观 和 风格 是 否 统一 的 关键 。 


4.1.1 插入 文本 
在 Dreamweaver CS6 中 为 页 面 插入 文本 的 常用 方法 有 两 种 。 


1. 直接 输入 文本 

将 光标 定位 在 设计 视图 中 需要 插入 文本 的 地 方 ,通过 键盘 直接 输入 即 可 。 这 里 特别 
提示 几 种 操作 方式 。 

人 站 无 标 晤 文档 

1) 换行 ey 

在 输入 文本 的 过 程 中 ,如 果 直 接 按 下 Enter 键 进 
和 区 人: 刚 币 间 是 猴 大 : 识 荐 几 为 软件 自动 生成 了 一 个 着 扩 松下 Ceey 机 渤 行 报 本 
段落 。 直接 按 下 《Enter> 键 进行 换行 

如 果 使 用 Shift 十 Enter 键 进行 换行 , 则 显示 为 正 使 用 组 合 键 《shifttEnter> 进行 换行 
常 行 间距 , 其 原因 在 于 软件 自动 插入 了 一 个 | 捐 旨 时 emer 于 和 
二 br 一 标签 ,从 而 使 换行 后 行 间 距 较 小 , 如 图 4-1 
所 示 。 图 4-1 文本 的 换行 


直接 按 下 《Enter》 键 进行 换行 




















第 4 章 文本 与 图 像 


2) 输入 多 个 空格 

默认 情况 下 ,Dreamweaver CS5 中 不 能 连续 输入 多 个 空格 ,只 能 输入 一 个 。 如 果 用 
户 想 要 输入 多 个 空格 ,需要 将 输入 法 提示 框 上 的 “半角 ” 改 为 “全 角 ”, 或 者 使 用 Ctrl 十 
Shift 十 Space 键 增加 空格 。 


2. 复制 粘贴 
从 其 他 应 用 程序 中 复制 文本 (快捷 键 为 Ctrl 十 C) ,然后 切换 到 Dreamweaver 中 ,将 插 
入 点 定位 在 “文档 ”窗口 中 ,执行 粘贴 操作 (快捷 键 为 Ctrl 十 V) 即 可 。 


3. 批量 替换 

“批量 蔡 换 ” 功 能 能 够 帮助 用 户 查找 并 替换 页 面 中 指定 的 内 容 , 具 体操 作 步 又 如 下 。 

(1) 启动 Dreamweaver CS6 ,并 打开 正在 编辑 的 网 页 文件 。 

(2) 在 菜单 栏 中 执行 “编辑 ”>“ 查 找 和 替换 ”命令 ,或 者 按 Ctrl 十 F 键 ,这 时 弹出 “ 查 
找 和 替换 ”对 话 框 。 

(3) 在 此 对 话 框 中 的 “查找 范围 "下 拉 菜 单 中 选择 要 搜索 的 范围 ,这 里 选择 “当前 文 
档 ? 选 项 ,如 图 4-2 所 示 。 





“| 当前 文档 














| 源 代 三 

















普 换 呈 ) 











选项 : 回 区 分 大 小 与 @) 团 知 喇 空 自由 
DR 回 使 用 正则 表达 式 &) 





图 4-2 “查找 和 替换 "对话 框 


(4) 在 “搜索 ”下 拉 菜 单 中 选择 搜索 类 型 ,包括 “ 源 代码 “文本 ”文本 (高 级 )”" 和 “指定 
标签 ”4 种 选择 。 

(5) 在 “查找 ”文本 框 中 输入 要 查找 的 文本 内 容 , 在 “替换 ”文本 框 中 输入 要 替换 的 内 
容 , 然 后 单 击 “ 查 找 下 一 个 "按钮 ,软件 会 自动 查找 到 相关 内 容 。 最 后 单 击 “ 替 换 " 按 钮 或 
“替换 全 部 ”按钮 ,进行 替换 操作 。 
4.1.2 创建 超 链接 

超 链接 是 指 从 一 个 网 页 指向 另 一 个 目标 的 连接 关系 ,这 个 目标 可 以 4 
是 一 个 网 页 ,也 可 以 是 相同 网 页 上 的 不 同位 置 ,还 可 以 是 一 张 图 片 ,一 个 
电子 邮件 地 址 ,甚至 是 一 个 应 用 程序 。 

1. 文本 链接 

根据 目标 的 不 同 , 超 链接 可 以 分 为 内 部 链接 、 外 部 链接 和 空 链接 。 这 里 通过 实例 演示 
创建 超 链接 的 过 程 。 





a 


区 
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【案例 4-1】 创建 文本 链接 。 

@ 启动 Dreamweaver CS6, 新 建 空白 HTML 5 文档 ,在 页 面 中 输入 一 些 文字 ,此 时 
页 面 结构 如 图 4-3 所 示 。 

@ 选择 第 一 行文 字 , 在 菜单 栏 中 执行 “插入 ”一 “超级 链接 ”命令 ,或 者 在 “插入 ”面板 
的 “常用 ”类别 中 单 击 “超级 链接 ?按钮 ,此 时 打开 如 图 4-4 所 示 的 对 话 框 。 





文本 方法 一 : 通过 莱 单 创建 超 榜 接 
诈 接 - C 
目标 - ~ 




















标题- 
访 同 刍 
Tab 键 素 引 - 











Fboay> 
|<p> 方 法 一 : 通过 荣 单 创建 超 树 接 </p> 
|<p> 方 法 二 : 通过 属性 检查 器 创建 超 链接 </p>| 
kjpoay> 


图 4-3 当前 页 面 结 构 图 4-4 “超级 链接 ”对 话 框 









@ 在 该 对 话 框 的 “文本 ”选项 中 ,输入 或 修改 链接 的 文本 ,然后 在 “链接 "文本 框 中 输 
入 要 链接 到 的 文件 的 名 称 。 

@ 在 “目标 ?下 拉 菜 单 中 选择 一 种 用 于 显示 链接 文件 的 方式 。_blank 是 指 将 链接 的 
文件 加 载 到 一 个 未 命名 的 新 浏览 器 窗口 中 ;_parent 是 指 将 链接 的 文件 加 载 到 含有 该 链接 
的 父 窗 口中 ;_self 是 指 将 链接 的 文件 加 载 到 该 链接 所 在 的 同一 窗口 中 ;_top 是 指 将 链接 
的 文件 加 载 到 整个 浏览 器 窗口 中 。 

@ 在 “标题 "文本 框 中 输入 链接 的 标题 文字 ,此 处 的 文字 内 容 , 会 在 光标 悬 停 在 超 链 
接 上 时 显示 。 

@ “访问 键 " 选 项 用 于 设置 在 浏览 器 中 选择 该 链接 的 等 效 键盘 键 ,“Tab 键 索 引 ? 选 项 
用 于 设置 Tab 键 顺 序 的 编号 ,这 里 可 以 不 做 任何 设置 。 

@ 待 所 有 设置 完成 后 , 单 击 “ 确 定 ” 按 钮 即 可 为 文本 添加 超 链接 。 

@ 选择 设计 视图 中 的 第 二 行文 字 , 单 击 属性 面板 中 “链接 ” 右 侧 的 文件 夹 图 标 
而 ,在 弹出 的 对 话 框 中 选择 一 个 文件 ,或 者 在 “链接 "文本 框 中 输入 文档 路 径 和 文件 
名 ,再 或 者 按 住 圈 图 标 不 放 , 出 现 一 个 箭头 ,将 其 指向 目标 文档 即 可 建立 超 链 接 , 如 
图 4-5 所 示 。 

@ 最 后 ,通过 浏览 器 预览 可 以 发 现 添加 了 超 链 接 的 文本 颜色 发 生 了 变化 ,而 且 文本 
下 面 也 添加 了 一 条 下 划 线 ,如 图 4-6 所 示 。 

需要 说 明 的 是 ,如 果 和 暂时 希望 建立 一 个 未 指定 目标 的 空 链接 , 则 在 “链接 ”文本 框 中 输 
和 人 “#” 即 可 。 

2. 邮件 链接 

邮件 链接 是 一 种 特殊 的 链接 , 单 击 这 种 链接 ,可 以 自动 启动 电子 邮件 程序 。 


3. 锚 链 接 
浏览 网 页 时 ,用 户 肯定 都 有 这 种 体验 : 当 浏览 的 页 面 内 容 较 多 ,需要 连续 滚动 多 次 才 
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图 4-5 通过 属性 检查 器 创建 超 链 接 














能 完整 阅读 时 ,网 页 设计 者 通常 会 增加 诸如 * 返 回 页 面 顶部 ?的 超 链 接 , 为 用 户 提供 方便 。 
这 种 用 户 体验 就 是 采用 锚 链 接 完成 的 。 





[<azcicie > 


<h2> 荷 娘 月 色 (节选 )</h2> 
<p>| 党 不 二 硕 . </p> 
</article> 

<foocer><a>>> 返 回 页 而 顶部 </a>&nbsp;&nbsp;<a> 信 息 反馈 </a></foocez> 


图 4-6 创建 超 链接 图 4-7 页 面 初始 结构 


【案例 4-2】 创建 邮件 链接 和 锚 链 接 。 

四 启动 Dreamweaver CS6 ,新 建 空白 HTML 5 文档 ,在 页 面 中 输入 相关 内 容 , 页 面 
结构 如 图 4-7 所 示 。 这 里 建议 在 段落 p 元 素 中 输入 较 多 的 文字 内 容 , 这 是 因为 ,如 果 文 本 
内 容 太 短 (一 个 屏幕 即 可 完全 显示 ) ,即便 创建 锚 链 接 也 不 能 看 到 效果 。 

@ 将 光标 定位 在 要 创建 锚 点 的 位 置 上 , 即 目标 位 置 。 本 案例 中 将 光标 定位 在 页 面 顶 
部 的 “荷塘 月 色 ” 文 字 前 面 。 

@ 在 “插入 "面板 的 “常用 "类别 中 单 击 “ 命 名 锚 记 ”按钮 呐 , 或 者 在 菜单 栏 中 执行 “ 插 
入” 一 “命名 锚 记 "命令 ,再 或 者 按 Ctrl 十 Alt 十 A 键 ,打开 “命名 锚 记 ”对 话 框 。 

@ 在 该 对 话 框 内 的 “ 锚 记 名 称 ”文本 框 中 输入 top, 如 图 4-8 所 示 。 单 击 “ 确 定 ” 按 钮 ， 
即 可 在 文中 “荷塘 月 色 ” 前 面 持 入 锚 记 图 标 , 如 图 4-9 所 示 。 











动 .4\4-2 6 建部 ft 符 纺 PE 经 掖 him - 口 x 
昌 荷 塘 月 色 ( 节 选 ) 


月 /5 如 流水 一 般 ， 静 静 地 泻 在 这 一 
[ody Crtialey an “加 


图 4-8 “命名 锚 记 ”对 话 框 图 4-9 插入 命名 锚 记 后 的 效果 
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加 将 光标 定位 在 页 面 底 部 的 “返回 页 面 项 部 ”文字 中 间 , 并 在 属性 面板 的 “链接 ”文本 
框 中 输入 锚 记 名 称 #top, 即 可 完成 一 个 锚 链 接 的 创建 ,如 图 4-10 所 示 。 

将 光标 定位 在 页 面 底部 的 “信息 反馈 "文字 中 间 ,并 在 属性 面板 的 “链接 "文本 框 中 
输入 mailto: wufengl121@126. com, 即 可 完成 一 个 邮件 链接 的 创建 ,如 图 4-11 所 示 。 


葬 无 ~ 了 7 于 拉丝 元 
色拉 外 ) #top MA iD 税 摘 QE) mailto: wufengll21@l26.com vv BD 
图 4-10 创建 锚 链 接 4-11 创建 邮件 链接 


@ 保存 网 页 文件 ,在 浏览 器 中 预览 后 单 击 “ 返 回 页 面 顶部 "文字 链接 , 即 可 返回 页 面 
顶部 ; 单 击 * 信 息 反馈 ?文字 链接 , 即 可 打开 Outlook 软件 。 
4.1.3 与 文本 相关 的 基础 属性 


网 页 中 呈现 的 文字 外 观 ( 大 小 、 加 粗 和 风格 等 ) 均 在 CSS 中 进行 控制 , 表 41 和 表 4-2 是 
CSS 中 常用 的 字体 属性 和 文本 属性 ,通过 对 这 些 属性 的 设置 可 以 精确 控制 文本 外 观 。 


表 4-1 CSS 中 常用 的 字体 属性 




















CSS 字体 属性 解 释 
font 该 属性 是 简写 属性 ,其 作用 在 于 将 所 有 针对 字体 的 属性 设置 在 一 个 声明 中 
font-family 设置 网 页 使 用 字体 的 类 别 
font-size 设置 文本 的 字体 大 小 
font-weight 设置 字体 的 粗细 ,包含 100 一 900 多 个 级 别 
font-style 设置 文本 的 字体 样式 
font-variant 设置 文本 为 小 型 大 写字 母 的 外 形 





表 4-2 CSS 中 常用 的 文本 属性 























CSS 文本 属性 解 释 

line-height 设置 行 高 

text-indent 设置 文本 块 首 行 的 缩 进 (段落 设置 中 经 常 使 用 ) 
text-align 设置 文本 的 水 平 对 齐 方式 

text-decoration 设置 添加 到 文本 的 装饰 效果 ( 超 链接 设置 中 经 常 使 用 ) 
text-shadow 设置 文本 的 阴影 

text-overflow 设置 文本 溢出 时 的 事件 

word-wrap 设置 当前 行 超过 指定 容器 的 边界 时 是 否 断 开 换行 








1. font-family 
font-family 属性 用 于 定义 目标 元 素 使 用 何 种 字体 进行 显示 。 在 
CSS 中 ,可 以 一 次 定义 多 个 字体 类 别 让 系统 自行 选择 ,样式 代码 如 下 。 
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P {font- family:" 微 软 雅 黑 ", "宋体 ", Arial, Verdana, "Times New Roman";} 

操作 系统 中 ,一 般 包 含 系统 默认 的 “宋体 “黑体 “楷体 ”Arial 和 Times New Roman 
等 常规 字体 ,如 果 开 发 者 要 使 用 特殊 字体 (如 方正 水 柱 简体 等 ) ,可 将 该 字体 文件 存放 到 
Web 服务 器 上 , 它 会 在 需要 时 被 自动 下 载 到 用 户 的 计算 机 上 。 

车 使 用 这 种 方法 ,需要 在 CSS 规则 中 使 用 @font-face 规则 ,样式 代码 如 下 。 

@ font- face {font- family: 自 定义 字体 名 称 ; src: url(" 自 定义 字体 .ttf') ;} 


而 在 使 用 Web 服务 器 上 的 字体 时 ,需要 使 用 font-family 属性 引用 自 定义 字体 。 

【案例 4-3】 font-family 属性 。 

| 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 ,在 页 面 中 创建 如 图 4-12 所 示 的 
结构 代码 。 








boay> 
<aiv class="box"> 

<h2> 中 秋 </h2> 

<p class="a"> ( 唐 ) 李 朴 </p> 

<p class="b"> 扩 挤 当空 宝 镜 升 ， 云 间 仙 籁 寂 无 声 ; </p> 

<p class="c"> 平 分 秋色 一 轮 莱 ， 长 伞 云 芋 千里 明 ; </p> 

<p class="d"> 笋 免 空 从 纺 外 落 ， 妖 蝇 休 向 眼前 生 ; </p> 

<p class="e"> 灵 榴 拟 约 同 携手 ， 更 待 银河 彻底 青 。</p> 
</div> 
<aiv class="box"> 

<p class="f"> 这 里 的 字体 并 没有 安装 到 本 地 计算 机 中 ， 而 是 使 用 
的 服务 器 字体 。</p> 





图 4-12 案例 4-3 的 页 面 结构 


@ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-13 所 示 。 


cyle Cype="text/cas"y 
‘box { 
border: 4px #FF0000 solid;/* 设 置 边框 粗细 、 颜 色 和 类 型 */| 
Padding: 10px;/* 设 置 box 的 内 边 距 为 0px*/ 
margin: 10px;/* 设 置 box 的 外 边 距 为 10px*/ 
text-align: center;/*box 内 所 有 内 容 居中 */ 













/* 定 义 a 类 文字 为 黑体 */ 
/* 定 义 b 类 文字 为 宋体 */ 
* 定 义 c 类 文字 为 华文 行 档 */ 
* 定 义 d 类 文字 为 华文 彩云 */ 
) V* 定 义 e 类 文字 为 微软 雅 黑 */ 


a (font-family: 
.b (font-family: 
c (font-family: 
.d (font-family: 
‘© (font-family: 
Bfont-face { 
font-family: myfont; 
src; url(boyang.TTF); 
}/* 创 建 自 定义 字体 ， 并 设置 该 字体 服务 器 的 路 径 x/ 
.上 {font-family: myfont;}/* 引 用 自 定义 字体 */ 
</style> 








图 4-13 案例 4-3 的 CSS 规 则 


@ 通过 浏览 器 预览 ,效果 如 图 4-14 所 示 。 

2. font-size 

font-size 属性 用 于 设置 元 素 的 字体 大 小 ,其 值 可 以 是 绝对 值 也 可 以 
是 相对 值 。 常 见 的 有 px( 绝 对 单位 )、em( 相 对 单位 )、%( 相 对 单位 ) 和 pt 
(绝对 单位 ) 等 。 
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癌 font-family 届 性 


标题 没有 定义 字体 
系统 使 用 默认 字体 


此 行 设置 为 黑体 





此 行 设置 为 宋体 持 量 当 空 宝 镜 升 ， 云 间 仙 系 窟 无 声 ， 
平分 秋色 一 轮 油 ， 长 伴 坪 策 寺 里 明 。 此 行 设置 为 华文 行 楷 

此 行 设置 为 华文 彩云 天 SRS9L 生 昌 
有 灵 伐 拟 约 同 扒手， 更 待 银河 彻底 清 。 此 行 设置 为 微软 雅 黑 


过 里 的 客体 并 没有 安装 到 库 池 计算机 
平 ， 而 是 合用 的 服 坝 时 字体. 此 段落 使 用 服务 器 自 定义 字体 





图 4-14 font-family 属性 预览 效果 


3. font-style 
font-style 属性 用 于 定义 字体 的 风格 ,其 中 包括 normal( 默 认 值 ,正常 字体 ) \italic( 斜 
体 ) 和 oblique( 倾 斜体 )3 个 属性 值 。 


4. font-weight 

font-weight 属性 用 于 设置 字体 的 粗细 , 它 包含 normal,bold.bolder \lighter、100 一 
900 个 属性 值 ,数字 值 400 相当 于 关键 字 normal,700 等 价 于 bold。 

【案例 4-4】 字体 的 大 小 、 样 式 和 粗细 。 

a 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 ,在 页 面 中 创建 如 图 4-15 所 示 的 
结构 代码 。 





body> 


<aiv id="box 1" class="box"> 
<h2>font-style 属 性 </h2> 
<p> 该 属性 用 于 定义 字体 的 风格 ， 其 中 包括 normal 、italic 和 <span> 
oblique</span> 3 个 属性 值 。</p> 
/div> 
div id="box 2" class="box"> 
<h2>font-weight 属 性 </h2> 
<p> 该 属性 用 于 设置 字体 的 粗细 ， 它 包含 
Inormal , bold \ bolder , 1ighter 和 <span>100~900</span> 等 多 
个 属性 值 。</p> 
/div> 
<div id="box 3" class="box"> 
<h2>font-size 属 性 </h2> 
<p> 该 属性 用 于 设置 元 素 的 字体 大 小 ， 其 值 可 以 是 绝对 单位 也 
可 以 是 相对 单位 。</p> 








4-15 案例 4-4 的 页 面 结构 


@ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-16 所 示 。 
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eatyle type="text/csa"> 
‘box { 
border: 1px #C60 solid;/* 设 置 边 杠 粗细、 颜色 和 类 型 */ 
padding: 5px;/* 设 置 box 的 内 边 距 为 spx*/ 
margin-bottom: 5px;/* 设 置 与 其 他 元 素 底部 的 距离 */ 







设置 标题 为 笠 体 */ 
}/* 设 置 字体 为 倾斜 体 */ 


#box 1 h2 {font-style: italic;} 
#box_ 1 span {font-style: obliqu 
#box_ 2 h2 {font-weight: 400;)/* 设 置 标题 为 正常 粗细 */ 
#box 2 span {font-weight: bold;}/* 设 置 字体 为 加 粗 */ 
#box_3 h2 tfont-size: 40px;)/* 设 置 字体 大 小 为 绝对 单位 */ 
#box_3 p {font-size: 1.5em;)/* 设 置 字体 大 小 为 相对 单位 */ 


/style> 





图 4-16 案例 4-4 的 CSS 规 则 


@ 通过 浏览 器 预览 ,效果 如 图 4-17 所 示 。 





D a 
«<>C[a 
设置 标题 为 斜体 一 十 Zoopt-styrze 悄 友 
该 属性 用 于 定义 字体 的 风格 ， 其 中 包括 normal、italic 和 
设置 个 别 内 容 为 斜体 051igus 3 个 属性 值 。 








除 标题 原本 的 
font-weight 属 性 二 


这 性 用 于 设置 守 休 的 可， 各 窒 六 于 中 设置 个 别 内 容 字体 为 加 粗 











字号 变 大 font-size 属 性 


该 属性 用 于 设置 元 素 的 字体 大 小 ， 其 值 设置 字体 为 相对 单位 
可 以 是 绝对 单位 也 可 以 是 相对 单位 。 


























图 4-17 字体 的 大 小 .样式 和 粗细 预览 效果 


4.1.4 行 高 与 首 行 缩 进 

1. line-height 

line-height 属性 用 于 控制 行 与 行 之 间 的 垂直 间距 ,该 属性 的 取 值 可 
使 用 百分比 (如 80% 等 )、 固 定 的 像素 值 (如 20px 等 ) 和 数值 (如 1. 5 
等 ), 且 允许 使 用 负 值 .默认 值 为 normal。 


2. text-indent 
text-indent 属性 能 够 实现 文本 缩 进 效 果 , 该 属性 值 可 以 为 百分比 数字 或 者 由 浮 点 数 
字 和 单位 标识 符 组 成 的 长 度 值 , 且 允 许 为 负 值 .如 下 面 的 代码 片段 所 示 。 


Pp {text-indent: 24px;} /x 由 于 是 固定 值 , 故 不 能 根据 字体 大 小 变化 准确 地 缩 进 两 个 汉字 距离 * / 
Pp {text- indent: 2em;} /* 由 于 是 相对 值 , 故 能 够 根据 字体 大 小 变化 自动 缩 进 两 个 汉字 距离 * / 





~ 
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【案例 4-5】 行 高 与 首 行 缩 进 。 
a 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 ,在 页 面 中 创建 如 图 4-18 所 示 的 
结构 代码 。 





boay> 

<aiv class="box"> 
<h2> 首 行 缩 进 </h2> 
<p>[E555 和 或]c/py 

[</aiv> 

|<aiv class="box"> 
<h2> 设 置 行 高 </h2> 
<p class="baifenb: 
<p class="xiangsu 
<p class-="shuzi">3. [ECS55 和 样式 由 .J</p> 

</div> 

</body> 


图 4-18 案例 4-5 的 页 面 结构 














@ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-19 所 示 。 


style type="text/css"y> 

.box { 
border: lpx #C60 solid;/* 设 置 边框 粗细 、 颜 色 和 类 型 */ 
padding: 5px;/* 设 置 box 的 内 边 距 为 spx*/ 
margin-bottom; 5px;/* 设 置 与 其 他 元 素 底部 的 距离 */ 





} 

.box p {text-indent: 2em; 
‘baifenbi {line-height: 6| 
.xiangsu {line-height: 301 
‘shuzi {line-height: 1.5;)/ 
</style> 


设置 缩 进 距离 为 字体 大 小 的 2 倍 ， 即 两 个 汉字 的 距离 */| 
“使 用 百分比 值 设置 行 高 为 60%*/ 

* 使 用 像素 值 设置 行 高 为 30px*/ 

用 数值 设置 行 高 为 1 .5*/ 











图 4-19 案例 4-5 的 CSS 规则 


@ 通过 浏览 器 预览 ,效果 如 图 4-20 所 示 。 


了 C | 口 主 高 与 首 行 颖 进 ,html 三 














首 行 缩 进 
设置 缩 进 距离 为 字体 大 小 的 上 
2 从, 即 两 个 汉字 的 距离 re 
字 和 单位 标识 符 组 成 的 长 度 
让 凡生 
设置 行 高 
行 高 设置 为 60%, 文字 本 丰 Gs ine-height 属 性 
呈现 十 春 现象 “ | 本 和 
2 在 Cs8 样 式 中 使 用 line-height 属 性 使 用 像素 值 设置 行 高 为 30px。 
全 用 入 但 设 王 和 本 总 指 控制 行 与 行 之 问 的 委 直 问题 不 能 根据 字体 大 小 自动 调整 
1.5 倍 行距 , 能 够 根据 字 | .在 css 样式 中 ,使用 1ine-height 属 性 
体 大 小 自动 调整 行 间距 与 行 之 亲 的 本 加 了。 











4-20 行 高 与 首 行 缩 进 预览 效果 
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4.1.5 文本 阴影 


在 CSS 中 ,text-shadow 属性 用 来 控制 文本 的 阴影 效果 ,能 够 规定 
水 平 阴影 、 垂 直 阴 影 、 模 糊 距 离 , 以 及 阴影 的 颜色 ,常规 使 用 方法 如 下 。 





text- shadow: 5px 5px 5px #FF0000; 

这 里 第 一 个 5px 代表 阴影 在 水 平方 向 的 位 移 , 第 二 个 5px 代表 阴影 在 垂直 方向 的 位 
移 , 第 三 个 5px 代表 阴影 的 模糊 半径 ,并 FF0000 代表 阴影 的 颜色 。 需 要 说 明 的 是 ,每 个 阴 
影 效果 必须 指定 偏 移 距离 ,而 模糊 半径 和 颜色 属性 值 可 以 省 略 ,如 果 将 偏 移 距离 设置 为 负 
值 , 则 代表 阴影 向 反方 向 偏 移 。 

此 外 ,还 可 以 为 同一 个 对 象 设置 多 个 阴影 ,阴影 效果 按照 给 定 的 顺序 依次 应 用 ,但 永 
远 不 会 覆盖 文本 本 身 。 

【案例 4-6】 文本 阴影 。 

OO 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 ,在 页 面 中 创建 如 图 4-21 所 示 的 
结构 代码 。 


@ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-22 所 示 。 


<style type="text/css"> 





-box { 


border: 2px #FF0000 solid;/* 设 置 边框 粗细 、 颜 色 和 类 型 */ 
margin-bottom: 10px;/* 设 置 与 其 他 元 素 底部 的 距离 */ 


font-family: "微软 雅 黑 "; 
font-weight: bolder; 
font-size: 40px; 
boay> 
<div class="box"> 
<p class="a">1.Text-shadow</p> ‘b 


{ text-shadow: 0.1em 0.1em 0.2em #000000; 
color: #FFF;) 
( text-shadow: Opx -1px #333333; 
color: #e3elel;} 
text-shadow: 0 0 4px white, 
0 -Spx 4px #FFFF33, 
2px -10px 6px #FFDD33, 
2px -15px 11px #FF8800, 


n 





<p class="c">3.Text-shadow</p> 











2px -25px 18px #FF2200; 
</div> color: #000;) 

</body> </style> 

图 4-21 案例 4-6 的 页 面 结构 图 4-22 案例 4-6 的 CSS 规则 


@ 通过 浏览 器 预览 ,效果 如 图 4-23 所 示 。 
4.1.6 溢出 文本 与 文本 换行 


1. text-overflow 

在 浏览 网 页 时 ,读者 时 常会 遇 到 某 些 栏目 由 于 内 部 文字 过 长 ,在 文 
本 结尾 时 使 用 省 略 号 显示 的 场景 。 之 前 ,一 般 使 用 JavaScript 脚本 来 实 
现 这 种 效果 ,而 现在 CSS 3 新 增 了 text-overflow 属性 ,使 得 这 个 问题 简化 很 多 。 

text-overflow 属性 规定 当 文 本 溢出 包含 元 素 时 的 处 理 方式 ,该 属性 包含 clip 和 
ellipsis 两 个 属性 值 。 前 者 表示 简单 的 裁 切 ,不 显示 省 略 标记 (.…); 后 者 表示 当 文 本 溢出 
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© 了 @ | 口 4-6%20 文 本 阴 时 html 立 三 








这 里 使 用 的 是 text-shadow < am 和 

属性 的 基本 参数 设置 XLSUOVV 
这 里 使 用 负 值 的 偏 移 距 高 ， 

使 得 文字 呈现 内 阴影 效果 








这 里 为 同一 对 象 赋予 多 个 阴影 
效果 ， 使 得 呈现 出 燃烧 特效 











图 4-23 文本 阴影 预览 效果 


时 显示 省 略 标记 (..….)。 

特别 需要 注意 的 是 ,要 实现 溢出 文本 显示 省 略 号 的 效果 ,除了 使 用 text-overflow 属 
性 以 外 ,还 必须 配合 white-space: nowrap (强制 文本 在 一 行内 显示 ) 和 overflow: hidden 
(溢出 内 容 为 隐藏 ) 同 时 使 用 才能 实现 。 

【案例 4-7】 溢出 文本 。 

a 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 ,在 页 面 中 创建 如 图 4-24 所 示 的 
结构 代码 。 
了 全 id="sidebar"> 
<h2> 今 日 要 闻 </h2> 


<ul> 


<1i><a href="#"> 多 个 家 居 电 商品 牌 步 入 调整 期 发 展 还 得 靠 烧 钱 </a></1i> 













<1i><a href="#"> 私 人 空间 的 私密 创意 世界 各 地 “80 后 ”的 房间 画像 </a></1i> 
<1i><a href="#"> 让 人 心动 的 19 个 特色 主题 酒店 </a></1i> 

</ul> 

</section> 

</body> 








4-24 案例 4-7 的 页 面 结构 


@ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-25 所 示 。 
@ 通过 浏览 器 预览 ,效果 如 图 4-26 所 示 。 


2. word-wrap 

在 案例 4-6 中 ,使 用 到 white-space 属性 ,该 属性 是 CSS 1 中 的 规则 ,为 了 增强 文本 换 
行 的 显示 功能 ,在 CSS 3 中 还 增加 了 word-wrap 专 有 属性 ,并 对 其 进行 了 标准 化 处 理 。 
word-wrap 属性 用 来 设置 当前 行 超过 指定 容器 的 边界 时 是 否 换 行 ,其 属性 值 包含 normal 
(控制 连续 文本 换行 ) 和 break-word( 内 容 在 边界 内 换行 ) 。 


需要 特别 说 明 的 是 , 当 使 用 break-word 属性 值 时 ,中 文 文本 和 英文 语句 没有 任何 问 
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<style type="text/css"> 

body, ul, 1i, section, h2 { 
margin: 
padding: 0; 

J 7* 元 素 初始 化 */ 

#sidebar { 
width: 310px; 
border: 5px #FF0000 solid;/* 设 置 边框 粗细 、 颜 色 和 类 型 */ 
padding: 10px;/* 设 置 box 的 内 边 距 为 10px*/ 

} 

11 





list-style: none; 
border-bottom: 1px #999 dashed;/* 设 置 新 闻 列 表 底部 虚线 外 观 */ 
margin-bottom: 5px;/* 设 置 列表 项 之 间 的 距离 */ 


display: block;/* 块 状 化 a 元 素 */ 
width: 300px;/' 
line-height: 1 置 行 高 为 1 . 5 代行 距 */ 

text-overflow; ellipsis;/* 文 本 洲 出 时 显示 省 略 标 记 (...) */ 

overflow: hidden;/* 为 使 用 cexc-overflow 做 准备 ， 将 溢出 内 容 设置 为 隐藏 */ 
white-space: nowrap;/* 为 使 用 text-overflow 做 准备 ,强制 文字 在 一 行内 显示 */ 
text-decoration: none;/* 取 消 超 链接 默认 时 的 下 划 线 效果 */ 








} 
/style> 





图 4-25 案例 4-7 的 CSS 规则 


今日 要 闻 

多 个 家 居 电 商品 牌 步 入 调整 期 发 展 还 得 … 此 列表 | 
私人 空间 的 私密 创意 世界 各 地 ”80 后 “的 房 … - 范围 出 现 了 省 
i 略 标记 





图 4-26 溢出 文本 预览 效果 


题 ,但 较 长 的 英文 单词 或 长 串 的 英文 字符 就 会 被 拆 分 。 


【案例 4-8】 
| 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 ,在 页 面 中 创建 如 图 4-27 所 示 的 


结构 代码 。 


文本 换行 。 





Fboay> 
|<div class="box"> 
<p>word-wrap 属 性 用 来 设置 当前 行 超过 指定 容器 的 边界 时 是 否 断 开 换行 。</py>| 
<p>Welcome to my home! </p> 
[</div> 
|<div class="box"> 
<p>Welcome to my home! abcdefghijklmnopqrstuvwxyz!</p> 
|</aiv> 
/body> 








4-27 案例 4-8 的 页 面 结构 


@ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-28 所 示 。 
@ 通过 浏览 器 预览 ,效果 如 图 4-29 所 示 。 


天 
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[ssyie type="text/css"> 
-box { 
border: 1px #C60 solid;/* 设 置 边框 粗细 、 颜 色 和 类 型 */| 
widrh: 100px;/* 设 置 容 器 宽度 </ 
margin: 10px;/* 设 置 外 边 距 */ 
float :left;/* 设 置 容 器 向 左 溯 动 */ 





word-wrap: break-word;/* 内 容 在 边界 内 换行 */ 





图 4-28 案例 4-8 的 CSS 规则 





使 用 word-wrap 属 性 后 ， 
中 文 文本 显示 正常 





rd-wrap 属 性 后 ， 
长 英文 字符 申 被 拆 分 











伪 类 (Pseudo-Class) 之 所 以 名 字 中 有 “ 伪 ” 字 ,是 因为 它 所 指定 的 对 
象 在 文档 中 并 不 存在 , 它 指定 的 是 一 个 或 者 与 其 相关 的 选择 符 的 状态 。 
伪 类 的 语法 形式 如 下 。 
选择 符 : 伪 类 {属性 : 属性 值 ; } 


伪 类 可 以 让 用 户 在 使 用 页 面 的 过 程 中 增加 更 多 的 交互 效果 ,最 常见 的 应 用 是 超 链接 
a 元素 的 几 种 状态 , 它 通过 :link、: visited、:hover 和 :active 来 控制 链接 内 容 访 问 前 、 访 问 
后 、 鼠 标 悬 停 时 以 及 鼠标 单 击 时 的 样式 。 具 体 代 码 如 下 所 示 。 


| 
.二 





a:link {color:#FF0000;} /* 未 访问 的 链接 状态 * / 
a:visited {color:#00FF00;} /* 已 访问 的 链接 状态 x / 
a:hover {color:#FFOOFF;} /* 鼠标 悬 停 到 链接 上 的 状态 * / 
a:active {color:#0000FF;} /* 被 激活 的 链接 状态 * / 


【案例 4-9】 伪 类 在 超 链 接 方 面 的 应 用 。 

@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 ,在 页 面 中 创建 如 图 4-30 所 示 的 
结构 代码 。 

@ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-31 所 示 。 

@ 通过 浏览 器 预览 ,效果 如 图 4-32 所 示 。 
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[sa 
cul class="none"> 

<1i><a href="#"> 伪 类 在 超 链接 方面 的 应 用 (默认 效果 ) </a></1i> 
</ul> 
<ul class="Pseudo"> 


<li><a hre > 伪 类 在 超 链 接 方面 的 应 用 </a></1i> 





<li><a hre > 伪 类 在 超 链 接 方面 的 应 用 </a></1i> 
<1i><a href-" 拉 "> 擅 类 在 超 链接 方面 的 应 用 </a></1i> 
</v1> 
</body> 





图 4-30 案例 4-9 的 页 面 结构 





<style type="text/cas"> 


margin: 0; 
padding: 0; 

ma 
border: 1px #C60 solid;/* 设 置 边框 粗细 、 颜 色 和 类 型 */ 
margin: 10px;/* 设 置 外 边 距 */ 
padding: 2px;/* 设 置 内 边 距 */ 
1ist-style: none;:/* 清 除 列表 原 有 样式 */ 

ul liat 


display: block;/* 块 杖 化 所 有 a 元 素 */ 

height: 24px;/* 由 于 a 元 素 块 杖 化 ， 所 以 这 里 为 元素 设置 高 度 */ 

line-height: 24px;/* 设 置 行 高 与 a 元 素 高 度 一 样 ， 使 得 其 内 部 文字 能 够 秋 直 居中 */ 
padding-left: 20px;/* 设 置 左 侧 缩 进 20px 的 位 置 */ 

text-decoration: none;/* 清 除 所 有 超 树 接 初始 状态 下 的 下 划 线 效果 */ 


‘Pseudo 11 a:hover { 
color: #F00;/* 设 置 限 标 县 售 时 字体 颜色 */ 
text-decoration: underline;/* 设 置 限 标 悬 停 时 ， 有 下 划 线 效果 */ 
font-weight: bolder;/* 设 置 限 标 悬 停 时 字体 加 粗 */ 
background: url (hover.gif) no-repeat left center;/* 由 于 左 侧 纺 进 , 
这 里 可 以 为 超 链 接 添加 图 像 背 景 */ 








</style> 


图 4-31 案例 4-9 的 CSS 规则 


站 从 尖 起 负 生 方面 的 让 用 x 
所 全 C 口 这 法 方 面 的 应 用 html# 537 三 














没有 添加 :hover 上 伪 类 在 超 链 接 方面 的 应 用 (默认 效果 ) 
全 伪 类 在 超 链接 方面 的 应 用 (默认 效果 
塘 关 在 超 链接 方面 的 应 用 鼠标 基 停 后 ， 字 
号 盆 夫 在 超 链 接 方 面 的 应 用 人 名 
协 关 在 超 链 接 方面 的 应 用 变 粗 、 增 加 
的 片 青 景 汐 果 











Ey../4.9 伪 类 在 -. 





4-32” 伪 类 在 超 链接 方面 的 应 用 预览 效果 


4.2 图像 


图 像 在 网 页 设计 中 拥有 举足轻重 的 作用 ,其 存在 的 目的 除了 传达 必要 的 信息 以 外 ,更 
多 时 候 还 是 为 了 烘托 网 站 主题 .吸引 浏览 者 的 注意 力 。 在 实际 工作 中 ,设计 者 不 仅 要 考虑 
如 何 处 理 图 像 , 还 要 考虑 网 站 发 布 后 如 何 高 效 地 对 图 像 进行 修改 。 在 网 页 中 ,常见 的 图 像 
格式 有 3 种 , 即 GIF JPEG 和 PNG。 
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(1) GIF 格式 。GIF 文件 格式 最 多 使 用 256 种 颜色 ,适合 显示 色调 不 连续 或 具有 大 
面积 单一 颜色 的 图 像 ,并 且 能 够 实现 透明 背景 效果 。 

(2) JPEG 格式 。JPEG 文件 格式 是 一 种 压缩 格式 ,适合 在 网 络 上 传输 ,是 非常 流行 
的 图 形 文件 格式 。 

(3) PNG 格式 。PNG 格式 图 片 因 其 高 保 真性 、 透 明 性 及 文件 体积 较 小 等 特性 ,被 广 
泛 应 用 于 网 页 设计 中 。 目 前 ,在 许多 大 型 网 站 中 使 用 同一 张 PNG 图 片 做 背景 ,按钮 . 导 
航 条 等 全 包含 在 该 背景 图 上 , 究 其 缘由 无 非 就 是 PNG 图 片 在 下 载 过 程 中 占 带宽 较 小 ,而 
且 颜 色 逼真 。 


员 回 4.2.1 插入 图 像 与 图 像 超 链接 


1. 插入 图 像 

要 在 Dreamweaver CS6 的 文档 窗口 中 插入 图 像 , 可 以 按照 以 下 方 
法 进行 。 

(1) 启动 Dreamweaver CS6 ,将 光标 定位 在 需要 插入 图 像 的 位 置 上 。 

(2) 在 菜单 栏 中 执行 “插入 ”一 图像” 命令, 或 者 在 “插入 ”面板 的 “常用 ”类 别 中 单 击 
“图 像 : 图 像 " 图 标 。 

(3) 此 时 ,弹出 “选择 图 像 源 文件 ”对 话 框 ,如 图 4-33 所 示 。 在 该 对 话 框 中 ,选择 需要 
的 图 像 , 右 侧 预览 窗口 即刻 显示 预览 效果 , 单 击 “ 确 定 ” 按 钮 。 







































































选择 文件 名 自 [is | 
3 区 绍 [sn 
查找 范围 加 ;页 co4 -OF 图 像 视 
此 4-3 font-family 尾 性 
且 ByGFz3500 me 
嘲 hovereif 他 
ee 
文件 名 加 :phone pne 区 琵 152 x 175 PNG TK/ 1 
文件 类 型 中。 国信 文件 :leeifit jpetjneestopnestam] [一 取 消 一 ] 
RL: Phone. png a 
| 机 于 : 。 议 档 一 = 4-9 人 类 在 直接 方面 的 应用 htl 
| 在 站 点 定义 中 更 改 财 认 的 举 接 相 对 于 
团 巴 图像 


























图 4-33 “选择 图 像 源 文件 ”对话 框 


(4) 这 时 弹出 如 图 4-34 所 示 的 对 话 框 。 在 此 对 话 框 中 ,“ 替 换文 本 ”是 指 用 户 需 要 为 
图 像 输 入 一 个 名 称 或 一 段 简短 描述 ;* 详 细 说 明 ” 用 于 设置 当 用 户 单 击 图 像 时 所 显示 的 文 
件 的 位 置 。 设 置 完 成 后 , 单 击 “ 确 定 ” 按 钮 ,图 像 即刻 显示 在 文档 中 。 
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若 换文 本 ”电话 ” 
详细 说 明 : http:// 




















如 果 在 插入 对 象 时 不 想 输入 此 信息 ， 迁 更 改 - 锋 助 功 
衣 - 首 选 参数。 





图 4-34 “图 像 标签 辅助 功能 属性 ”对 话 框 


需要 指出 的 是 ,如 果 引 用 的 图 像 路 径 在 当前 站 点 中 , 则 图 像 src 属性 值 为 相对 地 址 ， 
即 src 二 "phone. png"; 如 果 不 在 当前 站 点 中 , 则 图 像 src 属性 值 为 绝对 地 址 , 即 src 二 
"file:///D//My Pictures/images/phone. png"。 在 实际 工作 中 ,使 用 指向 本 地 的 绝对 地 
址 ,在 网 站 发 布 后 会 导致 图 像 无 法 正常 显示 。 所 以 ,设计 者 通常 将 图 像 放 在 本 站 点 内 的 
images 文件 夹 中 ,并 做 相对 地 址 的 链接 。 

(5) 正确 插入 图 像 后 ,再 次 选中 该 图 像 , 可 以 在 软件 的 属性 面板 中 对 图 像 进行 属性 设 
置 ,如 图 4-35 所 示 。 
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图 4-35 图 像 的 属性 面板 


Q ID: 用 于 设置 图 像 的 名 称 ,以 便 在 用 脚本 撰写 语句 时 引用 该 图 像 。 

@ 源 文件 : 指定 图 像 的 路 径 。 

@ 链接 : 用 于 设置 单 击 图 像 时 转向 的 超 链接 。 

@ 替换 : 为 图 像 输入 一 个 简短 的 描述 性 语句 , 当 鼠 标 悬 停 在 该 图 像 上 时 ,就 显示 该 
输入 的 信息 。 

@ 编辑 : 使 用 指定 的 外 部 编辑 器 打开 选 定 的 图 像 并 编辑 。 

地 图 : 用 于 创建 客户 端 图 像 地 图 。 

@ 宽 和 高 : 图 像 的 宽度 和 高 度 ,以 像素 表示 。 

2. 图 像 的 热点 链接 

在 同一 张 图 像 中 ,可 以 创建 多 个 热点 链接 , 当 访 问 者 单 击 不 同 的 热点 链接 时 ,页 面 就 
会 跳 转 至 其 他 页 面 。 创 建 了 热点 的 图 像 , 热 点 就 成 为 图 像 的 一 部 分 , 当 改变 图 像 的 大 小 
时 ,图 像 中 所 有 热点 也 会 发 生 相应 的 变化 。 


3. 图 像 占 位 符 

图 像 占 位 符 用 于 替代 图 像 的 位 置 , 常 在 图 像 暂 未 制作 完成 时 使 用 。 

4. 鼠标 经 过 图 像 

鼠标 经 过 图 像 是 指 当 光标 悬 停 在 某 一 张 图 像 上 面 时 ,会 显示 另 一 张 图 像 , 而 当 光 标 移 


~ 
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开 时 ,又 恢复 为 原 有 图 像 。 这 种 图 像 蔡 换 的 效果 ,常用 于 导航 和 图 标 按钮 中 ,以 增强 用 户 
体验 ,而 在 实际 应 用 中 ,设计 者 通常 使 用 CSS 中 a 元 素 的 伪 类 实现 图 像 交 蔡 效 果 。 

【案例 4-10】 图 像 的 几 个 示例 。 

@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 ,在 页 面 中 创建 如 图 4-36 所 示 的 
结构 代码 。 

@ 将 光标 定位 在 “一 h3 之 图 像 的 热点 链接 一 /h3 之 ”标签 后 面 ,并 插入 一 张 图 像 。 选 
中 之 前 插入 的 图 像 ,并 在 属性 面板 中 选中 热点 工具 回 . 然后 在 图 像 上 绘制 热点 区 域 ,如 
图 4-37 所 示 。 





冯 co) echonw-10 要 人 的 几 个 示人 V-10 加 你 的 人 示 岗 htmi- 一口 % 




































































[<body> 
<div class="box"> 
<h3> 图 像 的 热点 返 接 </h3>| 
[</div> 
> 
pe 去 天 -an 
<h3> 忌 标 经 过 图 像 </h3> 9 口 纺 国 四 ?YO A SW 区 
9 口 
图 4-36 案例 4-10 的 页 面 结构 图 4-37 绘制 热点 区 域 
@ 绘制 结束 后 ,选择 属性 面板 中 的 指针 热点 工具 [RN], 选 中 刚才 绘制 的 圆 形 热 点 区 域 ， 
此 时 属性 面板 显示 为 热点 的 属性 。 在 此 面板 中 ,对 “链接 "和 “目标 ”参数 进行 相应 的 设置 ， 
图 像 的 热点 链接 创建 完成 ,如 图 4-38 所 示 。 








秽 接 http: /we baidu com 





























图 4-38 完善 热点 属性 的 相关 参数 设置 


@@ 将 光标 定位 在 “二 h3 二 图 像 占 位 符 二 /h3 二 "标签 后 面 ,在 菜单 栏 中 执行 “插入 ”一 
“图 像 对 象 ” 一 “图 像 占 位 符 ” 命 令 , 或 者 在 “插入 ”面板 的 “常用 ”类 别 中 单 击 “图 像 : 图 像 占 
位 符 ” 图 标 。 | 

@ 这 时 弹出 如 图 4-39 所 示 的 对 话 框 。 在 
此 对 话 框 中 名称” 文本 框 用 于 设置 图 像 占 位 
符 在 Dreamweaver 中 显示 的 名 字 ; 宽 度 ” 和 
“高 度 ” 用 于 设 移 图 像 占 位 符 的 大 小 ;“ 颜 色 ” 用 
于 设置 图 像 占 位 符 的 颜色 ,以 区 别 于 其 他 占 位 
符 ;“ 蔡 换文 本 ”用 于 输入 描述 该 图 像 的 文本 。 




















图 4-39 “图 像 占 位 符 ” 对 话 框 
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设置 完成 后 , 单 击 “ 确 定 ” 按 钮 , 即 可 在 页 面 中 插入 一 个 图 像 占 位 符 。 

将 光标 定位 在 “二 h3 二 鼠标 经 过 图 像 二 /h3 二 ”标签 后 面 ,在 “插入 ”面板 的 “常用 ” 
类 别 中 单 击 “ 图 像 : 鼠标 经 过 图 像 ”按钮 ,即刻 弹出 如 图 4-40 所 示 的 对 话 框 。 对 话 框 中 主 
要 项 目的 含义 如 下 。 


图 像 名 称 ，Tnaged 
质地 图像 caail pne 
息 标 经 过 图 像 ” linkedin. png 

















葵 下 时 ,前往 的 URL- 











图 4-40 “鼠标 经 过 图 像 " 参 数 设置 


扣 图 像 名 称 : 用 于 设置 鼠标 经 过 图 像 的 名 称 。 

名 原始 图 像 : 用 于 设置 页 面 加 载 时 要 显示 的 图 像 。 

避 鼠标 经 过 图 像 : 用 于 设置 鼠标 指针 滑 过 原始 图 像 时 要 显示 的 图 像 。 

名 按 下 时 ,前 往 的 URL: 用 于 设置 当 单 击 图 像 时 要 打开 的 文件 路 径 。 

@ 根据 实际 需要 进行 相关 设置 ,最 后 单 击 “ 确 定 ” 按 钮 , 即 可 完成 鼠标 经 过 图 像 的 
插入 。 

@ 保存 网 页 文档 ,通过 浏览 器 预览 ,可 以 看 到 最 终 效果 ,如 图 4-41 和 图 4-42 所 示 。 
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鼠标 指针 经 过 图 像 鼠标 指针 经 过 图 像 




















图 4-41 鼠标 指针 未 经 过 效果 图 4-42 ”鼠标 指针 悬 停 效 果 


~ 


/ 到 


Dreamweaver CS6 十 HTML 5 十 CSS 3 网 页 制作 基础 教程 ( 微 课 版 ) 


4.2.2 与 图 像 相 关 的 CSS 属性 
background 属性 是 CSS 中 使 用 频率 非常 高 的 属性 之 一 ,为 了 方便 设计 师 灵活 地 实现 
网 页 效果 ,在 CSS 3 中 增强 了 该 属性 的 功能 ,如 允许 闪 加 多 个 背景 图 像 、 允 许 灵活 缩放 图 
像 大 小 ,以 及 允许 设置 图 像 放 置 的 位 置 等 。 在 CSS 中 有 关 控 制图 像 的 常用 属性 详 见 
表 4-3 所 示 。 
表 4-3 CSS 中 用 于 控制 图 像 的 属性 
































CSS 字体 属性 说 明 
background 简写 属性 ,作用 是 将 背景 属性 设置 在 一 个 声明 中 
background-repeat 设置 背景 图 像 是 否 重复 ,以 及 如 何 重 复 
background-color 设置 元 素 的 背景 颜色 
background-image 将 图 像 设置 为 背景 
background-position 图 像 定 位 ,用 于 设置 背景 图 像 的 起 始 位 置 
background-attachment 用 于 设置 背景 图 像 是 否 固定 或 者 随 着 页 面 的 其 余部 分 滚动 
background-size 定义 背景 图 像 的 大 小 
background-origin 指定 背景 图 像 的 显示 区 域 


1. background-color 
background-color 属性 是 背景 属性 的 一 部 分 ,其 主要 功能 是 设置 页 
面 中 相应 元 素 的 背景 颜色 。 





2. background-image 
background-image 属性 能 够 帮助 设计 者 引用 一 张 或 多 张 图 像 作为 
背景 出 现在 页 面 中 。 如 果 某 元 素 同 时 具有 background-image 属性 和 background-color 
属性 ,那么 background-image 属性 将 优先 于 background-color 属性 ,也 就 是 说 背景 图 像 
永远 覆盖 于 背景 颜色 之 上 。 

3. background-repeat 

background-repeat( 背 景 重复 ) 属 性 的 主要 作用 是 设置 背景 图 像 以 何 种 方式 在 网 页 中 
显示 , 它 包 含 4 种 平 铺 方 式 : repeat( 在 垂直 方向 和 水 平方 向 重复 ) .no-repeat( 不 重复 )、 
repeat-x( 水 平方 向 重复 ) 和 repeat-y( 垂 直方 向 重复 ) 。 

【案例 4-11】 背景 颜色 与 背景 图 像 。 

@ 启动 Dreamweaver CS6 .创建 空白 HTML 5 文档 ,在 页 面 中 创建 如 图 4-43 所 示 的 
结构 代码 。 

@ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-44 所 示 。 
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style> 
body { background: url(body bg.png) repeat; } 
/* 引 用 背景 图 ， 并 设置 为 横向 和 纵向 均 重 夏 排 列 */ 
box { 

width: 300px; 

height: 200px; 

border: 2px #FF0000 solid; 

margin: 10px; 


#box-1 { 
background-color: #FC0;/* 设 置 对 象 的 背景 色 */ 
background-image: url (hail .png) ;/* 设 置 对 象 的 背景 图 像 */ 
background-repeat: no-repeat;/* 设 置 对 象 的 背景 图 不 重复 排列 */ 














fbox-2 { 
<body> background: Url (snow.png) center center no-repeat, 
<div class="box" id="box-1"></div>| Url (box-2 bg.jpg) repeat-x; 

<div class="box" id="box-2"></div>| /* 设 置 两 个 背景 图 ， 多 个 图 像 将 层 天 显示 */ 

</body> </style> 

图 4-43 案例 4-11 的 页 面 结构 图 4-44 多 种 有 关 背 景 的 CSS 规则 


图 像 的 尺寸 是 由 图 像 的 实际 尺寸 决定 的 。 而 在 CSS 3 中 ,可 以 规定 背 
图 像 的 尺寸 ,这 就 允许 设计 者 在 不 同 的 环境 中 重复 使 用 背景 图 像 。 





@ 保存 当前 文档 ,通过 浏览 器 预览 后 效果 如 图 4-45 所 示 。 


这 里 的 容器 包含 背景 色 


和 背景 图 两 个 属性 body 元 素 中 使 用 背景 图 像 


横向 和 纵向 平 铺 效果 


这 里 的 容器 使 用 两 个 背景 
图 ， 两 个 图 像 层 癌 显示 





图 4-45 背景 色 与 背景 图 预览 效果 


4. background-size 


background-size 属性 用 于 规定 背景 图 像 的 大 小 。 在 CSS 3 之 前 , 背 








background-size 属性 需要 1 个 或 2 个 值 ,这 些 值 既 可 以 是 像素 px， 也 可 以 是 百 分 


比 % 或 auto, 还 可 以 是 特定 值 cover 或 contain。 


当 取 Cover 值 时 ， 图 像 将 缩放 到 正 好 完全 覆盖 定义 背景 的 区 域 ; 当 取 contain 值 时 ,图 


像 将 缩放 到 宽度 或 高 度 正好 适应 定义 背景 的 区 域 。 


J 
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5. background-origin 
background-origin 属性 规定 背景 图 像 的 定位 区 域 ,有 content-box( 仅 在 内 容 区 域 显 


示 背 景 ) .padding-box( 从 内 边 距 开始 显示 背景 ) 和 borderbox( 从 边框 区 域 开 始 显示 背 
景 )3 种 属性 值 可 以 选择 。 


【案例 4-12】 图 像 的 大 小 与 位 置 。 

@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 ,在 页 面 中 创建 如 图 4-46 所 示 的 
结构 代码 。 

@ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-47 所 示 。 


style> 
box { 
width: 256px; 





height: 256px; 
border: 2px #FF0000 solid; 
margin: 10px; 
background: url (dreamviewer.png) no-repeat; 
float: left; 
/* 引 用 图 像 ， 设 置 容器 大 小 与 图 像 原始 大 小 相同 */ 
#box-1 {background-size: 50% 50%;)/* 设 置 图 像 为 父 容器 大 小 的 50%*/| 
fbox-2 1 
width: 100px; 
height: 100px; 
background-size: cover; 
)/* 当 取 值 为 cover 时 ， 背景 图 像 将 跟随 容器 大 小 自 适 应 缩放 */ 
#box-3 { 
width;300px; 
height: 150px; 
background-size: contain; 











[aa /" 当 职 值 为 cover 时 ， 疹 景 图 各 将 六 放 到 宽度 或 高 度 正好 的 疹 景 区 域 */ 
<div class="box" id="box-1"></div>| #box-4 { 

div class="box" id="box-2"></div>| padding: 20px; 

<div class="box" id="box-3"></div>| background-origin: content-box; 

div class="box" id="box-4"></div> )/* 设 置 图 像 的 定位 兴 标 为 窑 吕 的 content 内 容 区 域 */ 

[</body> </style> 

图 4-46 案例 4-12 的 页 面 结构 图 4-47 案例 4-12 的 CSS 规则 


@ 保存 当前 文档 ,通过 浏览 器 预览 ,效果 如 图 4-48 所 示 。 

6. background 属性 的 缩写 

在 实际 工作 中 ,为 了 提高 书写 代码 的 效率 ,通常 使 用 background 简写 属性 ,作用 是 将 
背景 属性 设置 在 一 个 声明 中 。 示 例 代码 如 下 。 


background- color:# 666; 
background:url (dreamviewer .png); 
background- repeat :no- repeat; 


上 述 代码 可 以 简写 为 
background:# 666 url (dreamviewer .png) no- repeat left top; 


这 里 left 代表 背景 图 像 水 平方 向 居 左 放置 ,top 代表 背景 图 像 垂直 方向 居 顶 放置 。 


4.2.3 图 文 混 排 






几乎 在 任何 一 个 网 页 中 都 会 出 现 图 文 混 排 的 布局 ,例如 ,新 闻 类 网 
站 首页 各 种 板块 间 的 划分 、 新 闻 详 细 内 页 ,以 及 购物 网 物品 的 介绍 等 ， 
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box-2 容 器 将 background-size 
属性 设置 为 cover， 背 景 图 像 
将 跟随 容器 大 小 自 适应 缩放 



























box-3 容 器 将 background-size 
属性 设置 为 contain ， 背 景 
图 像 将 缩放 到 宽度 或 高 度 
正好 的 背景 区 域 ， 这 里 缩放 
到 与 容器 高 度 相 同 的 大 小 








box-1 容 器 引用 图 像 时 将 
background-size 属 性 设置 
为 50% 





box-4 容 器 将 background-origin 
属性 设置 为 content-box， 和 背景 
图 像 4 将 从 content 内 容 区 域 进行 


显示 


图 4-48 图 像 的 大 小 与 位 置 预览 效果 


这 些 都 需要 图 像 和 文字 相互 配合 才能 达到 预期 效果 。 无 论 外 观 怎么 变化 ,图 文 混 排 核心 
的 内 容 是 让 图 像 进行 浮动 。 下 面 以 实例 的 形式 讲解 图 文 混 排 的 实现 方法 。 

【案例 4-13】 图 文 混 排 。 

| 启动 Dreamweaver CS6, 创 建新 站 点 ,并 在 其 中 建立 存放 图 像 的 文件 夹 images, 然 
后 将 待 使 用 的 图 像 存放 在 该 文件 夹 中 。 

@ 在 页 面 内 插入 一 个 名 为 box 的 DIV 容器 ,并 在 其 中 插入 h2 标题 和 名 为 paper 的 
DIV 容器 。 

@ 在 名 为 paper 的 DIV 容器 内 部 依次 插入 图 像 和 两 个 无 序列 表 , 具 体 的 结构 代码 如 
图 4-49 所 示 。 


boay> 
<aiv id="box"> 
<h2> 汽 车 报价 </h2> 
<div id="paper"> 
<div class="list"> <span> <img src="car.jpg" width="180" height="120"></span> 


<ul> 
<1i>[ 国 内 ]<a href="#"> 雷克萨斯 Nx 官 图 发 布 将 于 北京 车 展 首发 </a></1i> 
"> 布加迪 将 于 北京 车 展 推出 传奇 限量 版 车 型 </a></1i> 
"> 全 新 大 众 POLO SUV 新 效果 图 2015 年 发 布 </a></1i> 
"> 试 大 切诺基 3. 0TD 柴 油 版 寻找 心中 的 Jeep</a></1i> 
#"> 精品 导购 : 23 万 进口 大 空间 省 油 城市 SOV</a></1i> 








<1i>[ 导 购 ]<a href=" 
</al> 
</div> 
</div> 
[</aiv> 
/boay> 











图 4-49 案例 4-13 的 页 面 结构 


这 里 box 容器 的 作用 是 容纳 其 他 元 素 ;paper 容器 的 作用 是 容纳 版 块 内 的 信息 ;span 
容器 的 作用 是 容纳 图 像 ; 无 序列 表 的 作用 是 罗列 多 个 列表 项 ,之 所 以 将 各 功能 区 域 划 分 得 
这 么 细 , 主 要 是 为 了 后 期 方便 控制 各 种 元 素 。 
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入 


pe 


@ 在 head 区 域内 部 插入 相关 CSS 样式 ,如 图 4-50 所 示 。 
@ 保存 当前 文件 后 ,通过 浏览 器 预览 ,效果 如 图 4-51 所 示 。 


tyle type="text/css"> 




























padding: Opx; 
margin: Opx; 


li {list-style: none;) 
/* 设 置 列表 项 无 样式 */ 
a (text-decoration: none;)} 
/* 设 置 超 链 接 无 下 划 线 */ 
a:hover {text-decoration: underline;} 
/* 设 置 超 链接 鼠标 悬 停 时 有 下 划 线 */ 
img {border: 0px; )/* 设 置 图 像 无 边框 */ 
body { 
color: #004080; 
font-size: 14px; 
line-height: 1.8; 
}/* 设 置 主体 内 容 字 号 和 行 间距 */ 
#box { 
width; 510px; 
margin: 10px auto; 
border: ipx #333 solid; 
}/* 美 化 pox*/ 
#box nh2 { 
line-height: 35px; 
font-size: 16px; 
padding-left: Spx; 
border-bottom: ipx #333 solid; 
}/* 设 置 标题 字号 ， 以 及 相关 美化 */ 
#paper {padding: 5px;)/* 设 置 内 边 距 spx*/ 
‘list span { 
float: left; 
margin-right: 10px; 
width; 180px; 
}/* 设 置 图 像 左 浮动 ， 且 距 右 边 文字 10 像 素 距离 */ 
</style> 


图 4-50 案例 4-13 的 CSS 规 则 图 4-51 图 文 混 排 预览 效果 


口 固 文 混 排 
全 了 CG DD file:///E:/ 编 写 书籍 汇总 /20140121 清 华 网 页 设计 YY | 三 





汽车 报价 





[国内 ] 雷克萨斯 MX 官 图 发 布 将 于 北京 车 展 首发 
[国内 ] 布加迪 将 于 北京 车 展 推出 传奇 限量 版 车 型 
[海外 ] 全 新 大 众 POLO SUY 新 效果 图 2015 年 发 布 
[ 试 器】 试 大 切诺基 3,0TD 柴 油 版 寻找 心中 的 Jeep 
[导购 ] 精品 导购 : 25 万 进口 大 空间 省 油 城市 SUY 

















4.3 ”过 程 指导 一 一 使 用 HTML 5 新 增 元 素 创建 “灯塔 
漫画 背景 博客 ” 


本 节 运 用 HTML 5 新 增 的 结构 类 元 素 ( 如 section 元 素 ,article 元 素 和 footer 元 素 ) 
创建 一 个 典型 的 博客 页 面 , 这 些 结构 类 元 素 能 够 让 网 页 的 整体 结构 更 加 直观 和 明确 ,更 加 
富有 语义 效果 。 

4.3.1 过 程 分 析 


通过 对 实际 任务 的 理解 ,本 节 需 要 完成 的 页 面 最 终 效果 如 图 4-52 所 示 。 

从 页 面 整体 布局 来 看 ,主体 内 容 采 取 左 右 两 列 分 布 的 形式 , 左 侧 为 博客 栏目 的 导航 ， 
右 侧 为 博客 内 容 列 表 的 主体 区 域 。 通 过 深思 熟 虑 ,页 面 布局 如 图 4-53 所 示 。 请 读者 仔细 
观察 ,页 面 布局 所 使 用 的 结构 类 元 素 。 
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至 一 千 亿美 元 俱乐部 。2014 年 阿里 巴巴 的 上 市 ， 最 : 计 已 经 是 2000 亿 美元 俱 乐 
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图 4-52 页面 最 终 效果 


4.3.2 步骤 详解 


1. 前 期 准备 工作 

(1) 启动 Dreamweaver CS6 ,在 菜单 栏 中 执行 “站 点 ”新 建站 点 ”命令 ,在 弹出 的 对 
话 框 中 设置 站 点 名 称 及 路 径 。 

(2) 在 站 点 中 创建 images 和 style 两 个 文件 夹 , 分 别 存放 页 面 修饰 图 片 和 CSS 样式 
文件 。 

(3) 在 Dreamweaver CS6 的 菜单 栏 中 执行 “文件 “新建” 命令 ,在 弹出 的 对 话 框 中 
选择 “空白 页 ”标签 ,“ 页 面 类 型 "选择 HTML,“ 布 局 "选择 “无 ”,“ 文 档 类 型 "选择 HTML 5, 最 
后 单 击 “ 创 建 "按钮 ,创建 一 个 空白 文档 ,并 命名 为 index. html。 

(4) 创建 一 个 外 部 CSS 样式 表 文 件 ,将 这 个 CSS 文件 保存 在 站 点 的 style 文件 夹 下 ， 


SS 


沁 


> 
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<section id="page"> 





<div id="pagewrap"> 





<section id="contents"> 








<header id="mainheader"> 








<section id="sidebar”> 


<section id="main"> 





<article class="post"> 





<header> 








<section class="entry"> 





<header> 


<article class="post"> 





























<header> 


<article class="post"> 











<section class="entry"> 























<footer id="pagefooter"> 



































图 4-53 页 面 布局 示意 图 


并 命名 为 style. css。 

(5) 在 Dreamweaver CS6 的 “CSS 样式 ”面板 
中 , 单 击 * 附 加 样式 表 ” 按 钮 圈 , 弹 出 “链接 外 部 样式 
表 ” 对 话 框 ,将 之 前 创建 的 style. css 外 部 样式 文件 
链接 到 index. html 页 面 。 


2. 页 面 初始 化 与 左 侧 边栏 的 制作 

(1) 在 index. html 文件 的 源 代码 编辑 窗口 中 ， 
手动 创建 如 图 4-54 所 示 的 页 面 基本 结构 。 在 该 页 
面 结构 中 ,一 section id 一 "page" 二 标签 用 于 控制 整 
个 页 面 对 象 ;一 div id 王 "pagewrap" 二 标签 作为 当 
前 页 面 的 外 包 庄 出 现 ; 二 section id 一 "sidebar" 过 标 
签 作为 盛 放 左 侧 边栏 内 容 的 容器 出 现 。 

(2) 进入 style. css 的 编辑 状态 .创建 页 面 初始 





FEsayy 
|<section id="page"> 
<div id="pagewrap"> 
<section id="sidebar"> 
<h2> 博 文 分 类 </h2> 
<ul> 
<1i><a href="#"> 心 情 传说 </a></1i> 
<1li><a href="#"> 人 生地 事 </a></1i> 
<1li><a href="#"> 社 会 百 象 </a></1i> 
<1i><a hreft="#"> 穿 衣 戴 虫 </a></1i> 
</ul> 
<h2> 特 色 博文 </h2> 
<ul> 
<1i><a href="#"> 影 评 博文 </a></1i> 
<1i><a href="#"> 思 绪 飞 扬 </a></1i> 
<1i><a href="#"> 生 活 旅行 </a></1i> 
</ul> 
</section> 








图 4-54 左 侧 边栏 页 面 结构 
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相关 规则 ,以 及 目标 容器 的 CSS 规则 ,如 图 4-55 和 图 4-56 所 示 。 保 存 当前 页 面 ,预览 效 


果 如 图 4-57 所 示 。 








margin: 
) /* 设 置 页 面 所 有 元 素 内 外 边 距 均 为 0*/ 
-clear { 
clear: borh; 
}/* 创 建 clear 类 ， 用 于 清除 浮动 时 使 用 */ 
la tcolor: #F30;} 
Ihi, h2, h3 { 
font-family: "微软 雅 黑 "; 
font-weight: bold; 
; 
body { 
background: url(../images/htmlbg.jpg) repeat; 
font-family: "微软 雅 黑 "; 
font-size: 14px; 
Color: #443f36; 
)/* 设 置 页 面 初始 外 观 ， 增 加 米色 背景 图 像 */ 
#page { 


width: 943px; 
margin: 0 0 25px 


fpagewrap { 
padding-top: 150px; 





) 


图 4-55 页 面 初始 化 规则 





background: url(. ./images/wrapbg.jpg) left top no-repeat; 


}/* 设 置 容器 的 宽度 ， 并 要 和 到 归 图 人 ， 该 图 像 以 左上 角 为 原点 对 齐 放置 */ 








sidebar T 
width: 139px; 
float: left; 
padding: 165px 10px 10px 10px; 
text-align: right; 
}/* 设 置 左 侧 边栏 的 宽度 和 浮动 规则 */ 
#sidebar h2 { 
display: block; 
font-weight: bold; 
color: #000; 
margin-bottom: 10px 
font-size: 2em; 让 设置 字体 大 小 为 原始 大 小 的 2 售 */ 
} 
#3sidebar ul { 
margin-bottom: 20p: 
list-style: none; 7" 革除 无 序列 表 原 有 风格 样式 */ 
} 
#sidebar 1iaf 
display: block; 
height: 25px; 


padding-right: 12px; 
color: #585247; 
text-decoration: none;/* 青 除 超 树 接 默认 下 划 线 外 观 显示 */ 





line-height: 25px;/* 将 行 高 设置 为 与 a 元 素 一 样 的 高 度 ， 使 其 中 的 文字 生 直 显示 */ 


background: url(../images/sidebarli.png) right center no-repeat; 








图 4-56 左 侧 边 栏 相关 CSS 规则 


3. 博客 主体 区 域 的 制作 


(1) 进入 index. html 文件 的 源 代码 编辑 状态 ,在 二 section id 一 "sidebar" 过 的 结束 标 


签 后 面 ,插入 id 二 "contents" 的 section 容器 。 


(2) 在 一 section id 一 "contents" 二 标签 内 部 ,插入 id 王 "mainheader" 的 header 容器 ， 
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pA 并 在 其 中 使 用 hl 元 素 创建 博客 的 标题 ,此 时 页 面 结构 如 图 4-58 所 示 。 


pe 


section id="page"> 
<div id="pagewrap"> 
<section id="sidebar"> 
<h2> 博 文 ..， 
</section> 
<section id="contents"> 
<header id="mainheader"> 
<hl>Yuze<span>B1og</span></hly>| 
</header> 
</section> 
</div> 
/section> 


图 4-57 左 侧 边栏 预览 效果 图 4-58 博客 标题 的 页 面 结构 

















(3) 进入 style. css 的 编辑 状态 ,创建 相关 CSS 规则 ,如 图 4-59 所 示 。 保 存 当前 页 
面 ,预览 效果 如 图 4-60 所 示 。 
#contents { 


float: left; 
width: 620px; 





} 


#contents p {line-height: 18px;} 
#mainheader { 
background: url(../images/headerbg.png) no-repeat; 
height: 205px; 
#mainheader hi { 
display: block; 
padding: 70px 70px 0 35px; 
Color: #f4731d; 
font-size: 5.2em!important;/* 设 置 字体 大 小 为 原始 大 
小 的 5.2 倍 ， 并 且 指 定 该 规则 优先 级 最 高 */ 
#mainheader hi span { 
color: #302c24; 
font-weight: normal!important;/* 设 置 字体 粗细 风格 为 
普通 显示 ， 并 且 指 定 该 规则 优先 级 最 高 */ 
} 








图 4-59 博客 标题 的 CSS 规则 
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图 4-60 博客 标题 的 预览 效果 


(4) 在 名 为 mainheader 的 header 容器 的 后 面 ,插入 名 为 main 的 section 容器 ,并 在 
其 中 使 用 article 元 素 创建 博客 文章 的 整体 框架 ,具体 的 页 面 结构 如 图 4-61 所 示 。 切 换 到 
style. css 文档 中 ,创建 与 博客 主体 区 域 相关 的 CSS 规则 ,如 图 4-62 所 示 。 


这 里 存放 博客 文章 的 标题 







oction io"main™y 
<article class-"post"> 
<header> 
<h2><a href=" 闻 "> 攻 联 网 20 年 5 </a></h2> 
<p>wuyuze | 








1 ”10635 人 已 阅读 </p> 


</header> 


<p> 罗 E055 棕 开 J]<a href-"#"> 风 六 全 文 </a></p>| 
x/section> 
</article> 
secrion> 








<time>2015 年 5 月 17 日 </time> 一 一 一 一 一 一 这 里 存放 博客 文章 的 辅助 信息 





<section class="entry"> 一 一 一 一 一 一 | 一 这 和 


存放 博客 文章 的 内 容 摘要 


图 4-61 博客 主体 区 域 的 页 面 结构 


(5) 保存 当前 页 面 ,预览 的 效果 如 图 4-63 所 示 。 


(6) 根据 页 面 布局 规划 可 知 ,博客 主体 区 域 的 其 他 文章 列表 与 之 前 创建 的 列表 结构 
相同 ,这 里 只 须 将 步骤 (4) 中 制作 完成 的 博客 文章 结构 复制 多 个 即 可 。 


4. footer 区 域 的 制作 


(1) 在 名 为 main 的 section 容器 后 面 , 插 入 名 为 pagefooter 的 footer 容器 。 
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sin 1 

background: url(../images/pagebg.gif)| 
repear-y; 

padding: 35px; 
} 
.posc { 

margin-bottom: 15px; 

padding-bottom: 15px; 

border-bottom: solid ipx #ccc6b5;/* 设 
置 边框 外 观 为 1 像素 粗细 ， 实 线 显示 */ 
.posr header {margin-bottom: 15px;} 
.post header p { 

margin-bottom: O!important; 

display: block; 

font-size: 1.1em; 





‘post header h2 { 
display: block; 
font: normal 2em "向 软 雅 黑 ";/* 设 置 字 体 
相 细 、 大 小 和 字体 效果 */ 
color: #262119; 
) 
post header h2 a { 
text-decoration: none; 
color: #262119; 
) 
,encry p {margin-bottom: 10px;) 


图 4-62 博客 主体 区 域 相关 的 CSS 规则 
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互联 网 20 年 :人 类 ， 因 为 互联 网 ， 而 有 福 了 

wuyuze | 2015 年 5 月 17 日 |10635 人 已 阅读 
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公司 巨头 们 ,因为 互联 网 而 有 注 了 。 天 这 全 文 











4-63 博客 主体 区 域 的 预览 效果 


(2) 在 footer 容器 中 ,根据 需要 插入 相关 版 权 内 容 即 可 ,此 时 的 页 面 结构 如 图 4-64 
所 示 。 
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(3) 切换 到 style. css 文档 中 ,创建 与 footer 容器 相关 的 CSS 规则 ,如 图 4-65 所 示 。 
最 后 ,保存 当前 页 面 , 通 过 浏览 器 预览 读者 即 可 看 到 最 终 效 果 。 


agefooter + 
background: 
url (. ./images/foorerbg.jpg) 
no-repeat: 
height: 132px; 
) 
.footerwrap { 
height: 112px; 
margin-bottom: Spx; 


.siceinfo { 
display: block; 
color: #fff; 
font-size: 1.2em; 
padding: 50px 0 0 0; 











<footer id="pagefooter"> 
<div class="footerwrap"> 
<p class="siteinfo"> 2015 &copy:; All Rights Reserved | 宇 泽 互 联 </p>| 












</div> text-align: center; 
[</footer> } 
图 4-64 footer 区 域 页面 结 构 图 4-65 与 footer 容器 相关 
的 CSS 规则 


至 此 ,使 用 HTML 5 新 增 结构 类 元 素 创建 的 博客 页 面 已 经 制作 完成 了 ,读者 在 制作 
过 程 中 需要 体会 结构 类 元 素 给 页 面 带 来 的 语义 。 


4.4 自主 任务 一 一 图 像 与 文本 的 简单 应 用 


根据 本 章 知识 的 讲解 ,读者 应 该 掌握 图 像 与 文本 在 网 页 中 是 如 何 被 CSS 控制 和 美化 
的 ,本 节 通 过 一 个 布局 简单 的 页 面 ,进一步 巩固 与 图 像 和 文本 相关 的 CSS 知识 ,页 面 最 终 
效果 如 图 4-66 所 示 ,布局 如 图 4-67 所 示 。 





,SRT 
Eee 
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4-66 ”图 像 与 文本 的 简单 应 用 最 终 效 果 
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图 4-67 布局 示意 图 


4.5 习题 


. 如何 批量 替换 页 面 中 的 文本 ? 

.text-indent 属性 用 于 控制 什么 ? 

.什么 是 锚 链 接 ? 它 与 普通 的 文本 链接 有 何 异同 ? 
.text-shadow 属性 用 于 控制 什么 ? 

.对 某 个 DIV 容器 附加 两 个 背景 图 像 时 ,会 有 什么 效果 ? 
. 图 文 混 排 的 核心 要 素 是 什么 ? 

， 如 何在 页 面 中 插入 如 图 4-68 所 示 的 特殊 字符 ? 

. 按照 图 4-69 所 示 内 容 , 制 作 图 文 混 排 效果 的 列表 。 


oo 中 四 性 





本 书 是 一 本 基于 Yat 标准 的 运用 
css 制作 呈 
局 


网 页 设计 与 制作 第 5 版 ) 

网 页 设计 与 制作 《Dreanweaver css 版 ) 
厅 通 Css 

OHL XHMTWL "SS 基础 轩 程 (第 6 版 ) 
阿 页 设计 与 制作 

CSS 和 门 

超 二 ss: YE 设计 艺术 靖 稻 








图 4-68 习题 7 图 图 4-69 习题 8 图 
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9. 使 用 CSS 规则 对 页 面 中 的 图 像 和 文本 加 以 控制 ,制作 如 图 4-70 所 示 的 页 面 。 
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图 4-70 习题 9 页 面 
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浮动 .定位 和 列表 


【本 章 导读 】 

CSS 中 的 浮动 和 定位 具有 重要 意义 与 作用 ,通过 具体 的 参数 设置 可 以 实现 页 面 布局 
的 多 样 变化 ,而 列表 元 素 在 页 面 布局 中 也 非常 实用 ,常见 的 导航 栏 、 新 闻 列 表 和 图 文 信息 
列表 都 是 通过 列表 元 素 作为 骨架 而 搭建 的 。 

【学 习 目标 】 

局 掌握 float( 浮 动 ) 属 性 的 相关 概念 和 使 用 方法 ; 

如 了解 有 关 定 位 的 基本 知识 ,能 够 使 用 相对 定位 和 绝对 定位 实现 网 页 效果 ; 

全 掌握 多 种 列表 样式 的 使 用 方法 。 


CSS 中 的 float( 浮 动 ) 属 性 能 够 使 应 用 该 属性 的 元 素 脱离 当前 文本 
流 , 向 左 或 向 右 移 动 , 直 到 它 的 外 边缘 碰 到 包含 框 或 男 一 个 浮动 框 的 边 





5.1.1 浮动 的 基本 知识 

当 某 个 元 素 被 赋予 浮动 属性 后 ,该 元 素 就 会 生成 一 个 块 级 框 ,脱离 并 悬浮 在 文本 流 
上 方 。float 属性 有 4 个 可 用 的 值 : left 和 right 属性 值 分 别 浮动 元 素 到 各 自 的 方向 ; 
none( 默 认 值 ) 属 性 值 使 元 素 不 具有 浮动 效果 ;inherit 属性 值 将 会 从 父 级 元 素 获 取 
float 值 。 





1. 左 ( 右 ) 浮 动 

当 某 个 元 素 具 有 向 左 ( 右 ) 浮 动 的 属性 ,那么 该 元 素 便 脱离 当前 文档 流向 左 ( 右 ) 移 动 ， 
直到 碰 到 左 ( 右 ) 边 缘 。 

【案例 5-1】 左 ( 右 ) 浮 动 。 eae ec een 


@ 启动 Dreamweaver CS6, 创 建 空白 HTML 5 文 2 a 
局 区 


档 , 在 代码 视图 中 ,创建 一 组 嵌 套 的 DIV 容器 ,具体 结构 ar 人 
代码 如 图 5-1 所 示 。 ee 
@ 在 代码 视图 中 ,在 本 页 面 head 区 域 创建 相关 CSS 图 51 案例 5 1 的 页 面 结构 
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规则 ,如 图 5-2 所 示 。 
@ 保存 当前 网 页 文件 ,通过 浏览 器 即 可 看 到 预览 效果 ,如 图 5-3 所 示 。 


<style type="text/css"> 


body I 
font-size:22px; 








} 
#box { 
width:400px; 
border:2px #F60 dotted; 





} 
#box-1 { 
width:100px; 
height:100px; 
border:2px #36F dotted; 
margin:10px; 





} 
#box-2 { 
width:100px; 
height:100px; 
border:2px #36F dotted; 
margin:10px; 


} 

#box-3 { 
width:100px; 
height:100px; 
border:2px #36F dotted; 
margin:10px; 

| 

</style> 


图 5-2 案例 5-1 的 CSS 规则 图 5-3 案例 5-1 的 初始 预览 效果 











@ 将 名 为 box_1 的 DIV 容器 增加 “float; right;” 属 性 ,这 时 box_1 便 脱离 文档 流向 
右 移动 ,直到 它 的 右边 缘 碰 到 box 容器 的 右边 框 为 止 ,如 图 5-4 所 示 。 








图 5-4 ”box_1 向 右 浮动 


回 为 名 为 box_2 的 DIV 容器 增加 “float: left;” 属 性 ,这 时 box_2 便 脱离 文档 流向 左 
移动 ,直到 它 的 左边 缘 碰 到 box 容器 的 左边 框 为 止 ,如 图 5-5 所 示 。 需 要 特别 注意 的 是 ， 
由 于 box_2 不 再 处 于 文档 流 中 ,所 以 它 不 占据 空间 ,实际 上 覆盖 了 box_3, 致 使 box_3 从 
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有 
pe 








图 5-5 box_2 向 左 浮动 


视图 中 消失 。 
@ 删除 之 前 为 box_1 和 box_2 增加 的 浮动 属性 。 统 一 为 box_1、box_2 和 box_3 增 


加 “float:left; ”属性 。 
这 时 box_1 向 左 浮动 直到 碰 到 左边 框 时 静止 ,另外 两 个 元 素 也 向 左 浮 动 , 直 到 碰 到 
前 一 个 浮动 框 也 静止 ,如 图 5-6 所 示 ,最 终 将 纵向 排列 的 DIV 容器 变 成 了 横向 排列 。 





图 5-6 ”所 有 元 素 向 左 浮 动 


细心 的 读者 可 以 发 现 , 由 于 box_1、box_2 和 box_3 均 拥 有 向 左 浮动 的 属性 ,集体 脱 
离 了 文档 流 ,致使 包含 这 3 个 容器 的 父 级 容器 box 内 部 没有 任何 内 容 , 所 以 box 被 简化 为 
一 条 线 位 于 页 面 项 部 。 解 决 这 种 问题 的 方法 是 针对 box 容器 编写 清除 浮动 的 CSS 规则 ， 
如 图 5-7 所 示 ,最 后 的 预览 效果 如 图 5-8 所 示 。 








-clearfix:arter + 
Content: "."; 
visibility: hidden; 
display: block; 
height: 0: 
clear: both; 








图 5-7 清除 浮动 图 5-8 案例 5-1 的 最 后 预览 效果 
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2. 浮动 时 空间 不 够 的 情况 

当 父 级 容器 宽度 无 法 容纳 其 内 部 浮动 元 素 并 列 放置 时 ,部 分 浮动 元 素 将 会 向 下 移动 ， 
直到 有 足够 的 空间 放置 它们 。 

【案例 5-2】 浮动 时 空间 不 够 的 情况 。 

@ 修改 案例 5-1 的 CSS 代码 ,将 box 的 宽度 设置 为 "width:300px;”, 这 时 无 法 并 列 
放置 所 有 元 素 , 通 过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-9 所 示 。 

@ 将 box_1 容器 的 高 度 设置 为 “height:150px;”, 这 时 box_1 高 度 增加 ,挡住 了 box_3 
容器 ,致使 box_3 停留 在 box_2 容器 的 下 方 ,如 图 5-10 所 示 。 


口 浮动 时 空间 不 萝 的 情况 
| 





图 5-9 ”水平 空 间 有 限时 的 状态 


5.1.2 清除 浮动 


虽然 浮动 属性 的 确 能 帮助 设计 者 实现 良好 的 布局 效果 ,但 如 果 使 用 
不 当 就 会 导致 页 面 出 现 错位 的 现象 。 这 时 就 要 将 某 些 元 素 的 浮动 属性 
清除 ,以 解决 页 面 错位 的 现象 。 

清除 浮动 主要 利用 的 是 clear 属性 中 的 both( 左 右 两 侧 均 不 允许 浮动 元 素 ) \left( 左 
侧 不 允许 浮动 元 素 ) 和 right( 右 侧 不 允许 浮动 元 素 )3 个 属性 值 清除 由 浮动 产生 的 效果 。 

【案例 5-3】 清除 浮动 。 

J@ 使 用 案例 5-1 的 页 面 内 容 继续 制作 .在 box_3 的 后 面 再 增加 一 个 块 级 元 素 box_4， 
此 时 页 面 结构 如 图 5-11 所 示 。 

@ 在 页 面 的 head 区 域 , 增 加 box_4 的 CSS 规则 ,如 图 5-12 所 示 。 








boay> 

<aiv id="box" class="clearfix" > #box_4 { 
width:370px; 
height:50px; 
margin:10px; 
background:#F90; 


<div id="box_1">box 1</div> 
<div id="box_2">box 2</div> 
<div id="box-3">box_3</div> 
<div id="box_4">box_4</div> 
|</adiv> 
[</boay> } 


图 5-11 案例 5-3 的 页 面 结构 图 5-12 案例 5-3 的 CSS 规则 
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@ 保存 当前 网 页 文件 ,通过 浏览 器 即 可 看 到 预览 效果 ,如 图 5-13 所 示 。 这 里 由 于 
box_4 并 没有 设置 浮动 ,虽然 独占 一 行 ,但 整体 却 跑 到 了 页 面 顶 部 ,并 且 被 之 前 的 元 素 所 
盖 , 出 现 了 非常 严重 的 页 面 错位 现象 。 











图 5-13 案例 5-3 的 预览 效果 


@ 要 解决 这 种 问题 ,就 必须 清除 左右 浮动 才能 让 新 增 的 块 级 元 素 处 于 正确 的 位 置 。 
因此 必须 在 box_4 的 CSS 样式 规则 中 添加 “clear:both;” 规 则 。 应 用 该 规则 后 ,box_4 容 
器 之 前 的 浮动 全 部 被 清除 ,通过 预览 即 可 看 到 效果 ,如 图 5-14 所 示 。 











图 5-14 清除 浮动 后 的 效果 


5.2 定位 


position( 定 位 ) 属 性 能 够 帮助 设计 者 对 页 面 中 的 各 种 元 素 定义 其 应 该 出 现 的 位 置 ,在 
CSS 布局 过 程 中 实用 性 很 强 。 通 过 使 用 position 属性 ,可 以 选择 4 种 不 同类 型 的 定位 模 
式 , 详 见 表 5-1 所 示 。 


5.2.1 静态 定位 与 固定 定位 


1. 静态 定位 
静态 定位 是 position 属性 的 默认 值 ,没有 特殊 的 定位 含义 。 在 不 重新 定位 的 情况 下 ， 
即便 对 某 一 元 素 应 用 了 静态 定位 (position :static) ,页 面 布局 也 不 会 有 任何 变化 。 
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表 5-1 position 属性 























属性 值 会 莫 

static position 属性 的 默认 值 ,无 特殊 定位 

relative 相对 ,元 素 虽然 偏 移 某 个 距离 ,但 仍然 占据 原来 的 空间 

absolute 绝对 ,元 素 在 文档 中 的 位 置 会 被 删除 ,定位 后 元 素 生成 一 个 块 级 元 素 

各 固定 ,元 素 框 的 表现 类 似 于 将 position 设置 为 absolute, 元 素 被 固定 在 屏幕 的 某 个 
位 置 ,不 随 滚动 条 滚动 

2. 固定 定位 


如 果 某 一 元 素 应 用 了 固定 定位 (position :fixed) ,那么 当 页 面 发 生 滚动 时 ,该 对 象 依然 
会 停留 在 原 有 的 位 置 上 ,相对 于 整个 浏览 器 来 说 没有 发 生 移动 。 

【案例 5-4】 静态 定位 与 固定 定位 。 

@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 。 在 文档 中 依次 创建 3 个 相互 
并 列 的 DIV 容器 ,页 面 结构 如 图 5-15 所 示 。 

@ 在 页 面 顶部 head 区 域 中 添加 CSS 样式 规则 。 根 据 需 要 这 里 对 boxl 应 用 静态 定 
位 ,对 box2 不 应 用 任何 定位 ,对 box3 应 用 固定 定位 ,具体 代码 如 图 5-16 所 示 。 





style type="text/css"> 
#boxl { 
width: 200px; 
height: 200px; 
Padding: Spx; 
margin-right: 10px; 
background-color: #9C0; 
float: left; 
Posicion: static; 


fbox2 { 
width: 200px; 
height: 2000px; 
/* 此 处 设置 高 度 是 为 了 让 浏览 器 出 现 纵向 的 深 动 条 /| 
margin-right: 10px; 
Padding: Spx; 
background-color: #FFO; 
float: left; 
} 
fbox3 { 
width: 200px; 
height: 200px; 
padding: Spx; 
background-color: #9C0; 
float: left; 




















[<body> position: fixedz/* 固 定 定位 */ 
<aiv id="box1"> 应 用 静态 定位 的 容器 box1</div>| top: 10px;/* 距 顶部 10px 的 距离 */ 
<aiv id="box2"> 没 有 应 用 定位 的 容器 box2</div>| left: 450px;/* 距 左 侧 450px 的 距离 */ 
<div id="box3"> 应 用 固定 定位 的 容器 box3</div>| ) 
</body> /style> 

5-15 案例 5-4 的 页 面 结构 图 5-16 案例 5-4 的 CSS 规则 


@ 保存 当前 页 面 文档 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-17 所 示 。 

本 案例 中 ,由 于 为 box2 设置 了 足够 高 的 高 度 , 所 以 使 得 浏览 器 出 现 纵向 滚动 条 。 当 
向 下 滚动 页 面 时 可 以 清楚 地 发 现 ,boxl 和 box2 跟随 浏览 器 页 面 的 滚动 而 滚动 ,而 box3 
仍然 位 于 屏幕 同样 的 位 置 。 





、 


区 


Dreamweaver CS6 十 HTML 5 十 CSS 3 网 页 制作 基础 教程 ( 微 课 版 ) 














图 5-17 静态 定位 与 固定 定位 的 预览 效果 


需要 特别 指出 的 是 ,IE 6 及 更 早 版 本 的 浏览 器 不 支持 固定 定位 ,读者 需要 更 新 浏览 
器 版 本 或 者 采用 其 他 浏览 器 才能 看 到 此 示例 的 效果 。 


3 加 5.2.2 相对 定位 与 绝对 定位 


在 实际 工作 中 ,相对 定位 与 绝对 定位 的 使 用 效率 很 高 , 某 些 特殊 效 
果 需 要 使 用 该 类 型 的 定位 去 解决 ,而 且 这 两 种 定位 通常 搭配 使 用 。 





相对 定位 (position: relative) 指 的 是 让 元 素 本 身 *“ 相 对 于 ” 它 原 始 的 起 点 进行 定位 。 
应 用 相对 定位 的 元 素 , 即 便 赋 予 新 的 位 置 值 ,但 仍然 占据 原来 的 位 置 空间 。 

【案例 5-5】 相对 定位 。 

J@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 。 在 文档 中 依次 创建 3 个 相互 
并 列 的 DIV 容器 ,页 面 结构 如 图 5-18 所 示 。 

@ 在 页 面 顶部 head 区 域 中 添加 CSS 样式 规则 。 根 据 需要 这 里 对 boxl 和 box3 不 应 
用 任何 定位 ,对 box2 应 用 相对 定位 ,具体 代码 如 图 5-19 所 示 。 


eatyle type="text/cas"> 
fboxi { 
width: 200px; 
height: SOpx; 
background: #FCO; 
) 
#box2 { 
width: 200px; 
height: 100px; 
background: #F60; 
position: relative; 
/* 相 对 于 原 有 位 置 进行 相对 定位 */ 
top: 30px;/* 距 顶部 30 像 素 */ 
left: 100px;/* 距 左 侧 100 像 素 */ 
) 
#box3 { 
width: 200px; 
height: SOpx; 
background: #FCO; 





Fboay> 

aiv id="box1"> 没 有 应 用 定位 的 元 素 box1</div> 
<aiv id="box2"> 应 用 相对 定位 的 元 素 box2</div; 
<aiv id="box3"> 没 有 应 用 定位 的 元 素 box3</div; 
k/boady> 


5-18 案例 5-5 的 页 面 结构 5-19 案例 5-5 的 CSS 规则 











/style> 
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@ 保存 当前 页 面 文档 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-20 所 示 。 

在 预览 效果 中 可 以 发 现 ,box2 元 素 由 于 应 用 了 相对 定位 ,致使 容器 本 身 向 右 、 向 下 各 
移动 了 一 定 的 距离 ,而 原始 的 位 置 空间 并 未 被 取代 ,在 应 用 新 的 位 置 坐标 后 ,还 遮盖 
box3 的 一 部 分 内 容 。 


2. 绝对 定位 

默认 情况 下 ,绝对 定位 (position:absolute) 是 依据 浏览 器 左上 角 的 0 点 开始 计算 的 。 
应 用 绝对 定位 的 元 素 可 以 被 放置 在 页 面 中 的 任何 位 置 ,并 且 多 个 对 象 可 以 进行 层 释 , 层 释 
的 顺序 由 z-index 属性 控制 ,z-index 属性 值 越 高 其 位 置 就 越 高 。 

【案例 5-6】 绝对 定位 。 

OO 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 。 在 文档 中 依次 创建 4 个 相互 
并 列 的 DIV 容器 ,页 面 结构 如 图 5-21 所 示 。 

@ 在 页 面 顶部 head 区 域 中 添加 CSS 样式 规则 。 根 据 需 要 这 里 对 boxl 和 box3 不 应 
用 任何 定位 ,对 box2 和 box4 应 用 绝对 定位 ,具体 代码 如 图 5-22 所 示 。 


style type="text/csa"> 
#boxl { 
width:200px; 
height: SOpx; 
background:#FCO; 
margin-bottom: 10px; 
} 
#box2 + 
width:200px; 
height: 50px; 
background:#F60; 
Pposition:absolute; 
/* 参 照 浏览 器 左上 角 进 行 绝对 定位 */ 
top:100px; /* 距 顶部 100 像 素 */ 
left:195px;/* 距 左 创 195 像 素 */ 


#box3 ( 
width:200px; 
height: SOpx; 
background; #6C9; 
} 
#boxs { 
width;200px; 
height:; SOpx; 
background:#FCO; 
— position:absolu 
六 关 耻 浏览 器 在 上 前进 行 绝对 定位 */ 
top:130px;/* 距 顶部 130 像 素 */ 
left:220px;/* 距 左 侧 220 像 素 */ 








<div id="box4"> 应 用 绝对 定位 的 元 素 box4</div>| ) 
cpoay> /style> 











5-21 案例 5-6 的 页 面 结构 5-22 案例 5-6 的 CSS 规则 


@ 保存 当前 页 面 文档 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-23 所 示 。 

在 预览 效果 中 可 以 发 现 ,box2 和 box4 元 素 由 于 应 用 了 绝对 定位 ,不 仅 向 右 、 向 下 各 
移动 了 一 定 的 距离 ,而 且 参 照 原 点 还 是 浏览 器 的 左上 角 。 由 于 box4 容器 在 box2 容器 后 
面 ,致使 同样 应 用 绝对 定位 的 box4 容器 覆盖 在 box2 容器 上 面 。 

车 要 改变 这 种 层 秋 顺序 ,可 以 分 别 在 CSS 样式 规则 中 对 box2 和 box4 元 素 增加 “z- 
index:101;” 和 “z-index:100;” 规 则 , 即 可 实现 box2 覆盖 box4 的 效果 。 本 案例 中 ,z-index 
的 数值 可 以 任意 设置 ,数值 越 大 越 接近 顶层 ,数值 越 小 越 接近 底层 。 


™ 
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left:195px: 





图 5-23 绝对 定位 的 预览 效果 


3. 相对 定位 与 绝对 定位 的 混合 使 用 

在 实际 工作 中 发 现 , 仅 使 用 相对 定位 或 仅 使 用 绝对 定位 的 情况 下 ,如 果 浏 览 器 窗口 放 
大 或 缩小 ,应 用 定位 的 元 素 有 时 会 跟随 浏览 器 的 放大 或 缩小 改变 其 位 置 ,不 能 满足 实际 需 
要 ,相对 定位 与 绝对 定位 的 混合 使 用 能 解决 这 个 问题 。 

例如 ,要 让 YY 容器 相对 于 其 父 级 容器 X 进行 绝对 定位 ,那么 X 容器 自身 需要 设置 为 
相对 定位 ,Y 容器 自身 需要 设置 为 绝对 定位 ,这 就 是 相对 定位 与 绝对 定位 的 混合 使 用 。 这 
里 通过 实例 进一步 说 明 。 

【案例 5-7】 相对 定位 与 绝对 定位 的 混合 使 用 。 

OO 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 。 在 文档 中 依次 创建 2 个 父子 
关系 的 DIV 容器 ,页 面 结构 如 图 5-24 所 示 。 aayy 


@ 在 页 面 顶部 head 区 域 中 添加 CSS 样式 规则 。 | aa 全 生生 下 生 人 人 和 


</div> 





根据 需要 这 里 对 父 级 X 容器 应 用 相对 定位 ,对 子 级 Y cpcay> 
容器 应 用 绝对 定位 ,具体 代码 如 图 5-25 所 示 。 图 5-24 案例 5-7 的 页 面 结构 


@ 保存 当前 页 面 文档 ,通过 浏览 器 预览 可 以 看 到 
效果 ,如 图 5-26 所 示 。 


style type="text/css"> 

#x 人 
width: 200px; 
height: 200px; 
background: #FCO; 
position; relative; 
padding: Spx; 
margin: 0 auto; 





#r 1{ 

width: 80px; 

height: 80px; 

padding: Spx; 

background: #F60; 

position: absolute; 

/* 欧 照 父 级 容器 x 进行 绝对 定位 */ 

top: 50px;/* 距 顶部 S50 像素 */ 

left: 100pxz/* 距 左 创 100 像 素 */ 
) 
[</style> 


图 5-25 案例 5-7 的 CSS 规则 图 5-26 案例 5-7 的 最 终 预 览 效 果 
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在 预览 效果 中 可 以 发 现 ,Y 容器 的 参照 物 是 其 父 容器 X, 设 置 的 top 和 left 值 也 是 相 
对 于 X 容 器 而 言 的 , 即 X 容器 处 于 页 面 中 的 任何 位 置 ,Y 容器 相对 于 X 容器 的 距离 都 是 
不 变 的 。 

通过 相对 定位 与 绝对 定位 的 混合 使 用 ,能 够 使 页 面 元 素 精确 地 被 放置 在 需要 的 位 置 ， 
而 不 受 外 界 因素 干扰 ,这 种 处 理 问题 的 方法 在 工作 中 经 常 遇 到 。 


5.3 列表 


列表 包括 无 序列 表 、 有 序列 表 和 自 定义 列表 ,但 无 论 何 种 类 型 的 列表 ,其 骨架 结构 都 
十 分 相似 ,在 网 页 制作 中 具有 重要 的 实际 意义 。 

本 书 第 2 章 中 已 经 对 列表 进行 了 简单 的 讲解 ,这 里 结合 工作 中 的 实际 经 验 , 以 及 相关 
的 CSS 知识 向 读者 进一步 讲解 列表 的 使 用 方法 。 
5.3.1 与 列表 相关 的 CSS 属性 

在 CSS 样式 中 ,主要 是 通过 list-style-image 属性 list-style-position 属性 和 list-style- 
type 属性 改变 列表 修饰 符 的 类 型 ,有 关 列 表 的 属性 及 其 属性 值 说 明 详 见 表 5-2 和 表 5-3。 

表 5-2 CSS 列表 属性 




















属 性 说 明 
list-style 复合 属性 ,用 于 把 所 有 用 于 列表 的 属性 设置 于 一 个 声明 中 
list-style-image 将 图 像 设置 为 列表 项 标志 
list-style-position 设置 列表 项 标记 如 何 根据 文本 排列 
list-style-type 设置 列表 项 标志 的 类 型 
marker-offset 设置 标记 容器 和 主 容器 之 间 水 平 补 白 


表 5-3 常用 的 list-style 属性 值 



































属性 值 说 明 
none 无 标记 ,不 使 用 项 目 符号 
disc 默认 值 。 标 记 是 实心 圆 
circle 标记 是 空心 圆 
square 标记 是 实心 方 框 
decimal 标记 是 数字 
lower-roman 小 写 罗马 数字 ,如 i ii .ii iv、V 等 
upper-roman 大 写 罗马 数字 ,如 工 、 卫 、 夺 .WV、V 等 
lower-alpha 小 写 英文 字母 ,如 a、b、c、d、e 等 
upper-alpha 大 写 英文 字母 ,如 A、B.C、.D\E 等 





【案例 5-8】 列表 的 简单 属性 。 


Dreamweaver CS6 十 HTML 5 十 CSS 3 网 页 制作 基础 教程 ( 微 课 版 ) 


4 J@ 启动 Dreamweaver CS6 ,新 建 HTML 5 文档 ,并 在 其 中 创建 一 组 无 序列 表 和 一 组 
谋 套 的 有 序列 表 , 这 时 的 页 面 结构 如 图 5-27 所 示 。 
@ 在 页 面 head 区 域 分 别 创建 名 为 wx 和 yx 的 CSS 规则 ,如 图 5-28 所 示 。 
















body> 
ul id="wx"> 
<11i> 无 序列 表 中 的 一 个 列表 项 </11>| 
<11> 无 序列 表 中 的 一 个 列表 项 </11>| 
</u1> 
|<ol id="yx"> 
<11i> 多 级 有 序列 表 </11> 
<1i> 多 级 有 序列 表 
<ol> Kstyle type="text/css"> 
<1i> 多 级 有 序列 表 </1i> Fwx { 
<1i> 多 级 有 序列 表 </1i> list-style-type: circle; 
</ol> )V* 设 置 无 序列 表 样 式 为 圆圈 模式 */ 
</1i> fyx { 
<1i> 多 级 有 序列 表 </1i> list-style-type: upper-roman; 
</o1> }/* 设 置 有 序列 表 样式 为 大 写 罗马 数字 */ 
</body> /style> 
图 5-27 案例 5-8 的 页 面 结构 图 5-28 案例 5-8 的 CSS 规则 


@ 保存 当前 文件 后 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-29 所 示 。 
从 本 例 中 可 以 看 出 ,列表 均 有 默认 的 外 观 属性 ,要 想 让 列表 呈现 出 其 他 外 观 ,还 需要 











借助 CSS 的 帮助 。 
新 歌 块 闻 m2» | 
回流 死 的 鱼 + 李宇春 
回 我 最 亲爱 的 4 张惠妹 必 
回 写 在 心里 的 职 4 米 铺 
回 乏 味 + 周 传 峻 
固 星 反 交 + 吴克群 
。 无 序列 表 中 的 一 个 列表 项 
。 无 序列 表 中 的 一 个 列表 项 固 无 法 原谅 4 李 佳 砚 
I。， 多 级 有 序列 表 国民 生 + 成 龙 
国 别 用 下 辈子 安 以 我 # 阵 瑞 病 
图 泡 甘 女孩 4 刘亦菲 
全 部 | 清除 | 
图 5-29 案例 5-8 的 预览 效果 5-30 包含 图 像 修饰 符 的 列表 


5.3.2 列表 的 图 像 修 饰 符 


列表 在 默认 风格 状态 下 其 外 观 不 能 满足 实际 的 美化 需要 ,设计 师 通常 借用 某 些 小 图 
像 作为 点 绥 放 在 列表 项 前 面 或 后 面 ,如 图 5-30 所 示 。 

根据 之 前 的 知识 可 知 ,list-style-image 属性 能 够 在 列表 前 增加 图 像 修 饰 符 ,而 在 实际 
工作 中 这 个 属性 使 用 频率 并 不 多 ,其 原因 在 于 使 用 该 属性 虽然 能 够 为 列表 增加 图 像 修饰 
符 , 但 控制 的 灵活 度 太 差 ,所 以 设计 者 通常 采用 其 他 方法 来 实现 向 列表 添加 图 像 修 饰 符 的 
效果 。 

这 里 着 重 讲解 工作 中 经 常 采 用 的 处 理 方法 ,请 读者 注意 padding-left 属性 在 案例 中 
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的 应 用 ,至 于 list-style-image 属性 的 用 法 ,读者 自行 实验 即 可 ,这 里 不 再 袭 述 。 

【案例 5-9】 列表 的 图 像 修饰 符 。 

本 案例 将 使 用 一 组 无 序列 表 制 作 常 见 的 音乐 排行 榜 榜 单 ,并 且 在 每 个 列表 项 前 面 显 
示 美 化 的 背景 图 像 ,具体 操作 步骤 如 下 。 

@ 启动 Dreamweaver CS6, 创 建新 站 点 ,并 在 其 中 建立 存放 图 像 的 文件 夹 ,将 所 用 素 
材 复制 到 该 文件 夹 中 。 

@ 新 建 HTML 5 文档 ,创建 一 个 名 为 sidebar 的 section 容器 ,并 在 其 中 创建 一 组 无 
序列 表 , 页 面 结 构 如 图 5-31 所 示 。 
<body> 
ome 


<ul> 
<li><a href="#"> 至 少 还 有 你 </a> <span> 隶 贝 娜 </span></1i> 











#"> 障 你 走 到 底 </a> <span> 张 视频 <c/span></1i> 

<li><a href="#"> 同 点 的 你 </a> <span> 胡 夏 </span></1i> 

<1li><a href="#"> 自 由 自在 </a> <span> 风 凰 传奇 </span></1i> 

> 想 神 马 就 有 神 马 </a> <span> 吴 黄 丰 </span></11>| 

> 男人 歌 </a> <span> 小 沈阳 </span></1i> 

> 情 非得 已 </a> <span> 硕 光 庆 </span></1i> 

<1i><a href="#"> 一 起 吃苦 的 幸福 </a> <span>exo</span></1i> 

</ul> 

</section> 


</body> 


图 5-31 案例 5-9 的 页 面 结构 











在 此 页 面 结构 中 ,使 用 无 序列 表 对 具体 内 容 进行 规范 ,二 a 二 标签 中 用 于 盛 放 音乐 的 名 
称 , 二 span 二 标签 用 于 盛 放 演唱 者 的 名 字 。 此 时 通过 浏览 器 预览 的 结果 如 图 5-32 所 示 。 

@ 从 图 中 可 以 看 出 ,整体 效果 很 差 ,下面 分 别 对 标题 ,列表 项 内 容 进行 美化 。 在 本 页 
面 顶部 的 head 区 域内 ,编写 对 应 的 CSS 样式 ,如 图 5-33 和 图 5-34 所 示 。 


style type="text/css"> 





{ 
margin: 0; 
padding: 0; 


la 
text-decoration: none; 
font-size: 12px; 





la:hover { 
text-decoration; underline; 
color: #F00; 


着 #sidebar { 

亮 width: 200px; 

border: 2px solid #999; 
margin: 10px; 





#sidebar hl { 

height: 32px; 

line-height: 32px; 

font-size: 20px; 

Padding-left: 10px; 

Color: #FFFFFF; 

background: url(h bg.gif) repeat-x left top;| 
) 


图 5-32 案例 5-9 的 当前 预览 效果 图 5-33 列表 的 图 像 修饰 符 的 CSS 规则 (1) 
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A 


pe 





Fidebar ul € 
height: 220px;/* 设 置 整个 列表 的 高 度 */ 


} 
#sidebar ul 1i { 

line-height: 20p: 

list-style: none; ft 去 除 列表 的 默认 风格 */ 
} 
#sidebar ul 1 pm { 

font-size: 12p: 


color: #CCC; /设置 歌手 名 字 为 区 色 =/ 


} 
</style> 





padding-left: 26px; /* 设置 内 过 中 目的 留 出 背景 图 多 的 位 置 */ 
background: urll(ul bg.gif) no-repeat 0 0; “设置 列 表 昌 图 人 左上 角 对 齐 */ 








图 5-34 ”列表 的 图 像 修饰 符 的 CSS 规则 (2) 


@ 保存 当前 文件 后 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-35 所 示 。 


需要 特别 注意 的 是 ,在 CSS 样式 规则 # sidebar ul 
中 ,padding-left 和 background 属性 分 别 设置 了 文字 缩 
进 距 离 和 增加 背景 图 像 的 效果 , 正 是 有 了 这 些 设置 才能 
看 到 最 终 的 效果 。 此 外 ,本 例 中 处 理 背景 图 像 的 方法 也 
有 上浆 端 ,例如 ,背景 图 像 必须 预先 调整 好 10 个 数字 之 间 
的 距离 ,而 且 如 果 增 加 了 每 个 列表 到 li 标签 的 高 度 ,就 
要 重新 制作 图 像 。 


5.3.3 纵向 导航 


导航 在 网 页 中 是 必 不 可 少 的 部 分 ,从 视觉 角度 来 看 ， 
导航 可 分 为 纵向 导航 、 横 向 导航 和 异形 导航 。 

透 过 现象 看 本 质 ,导航 可 以 归纳 为 一 个 列表 ,而 且 列 
表 项 之 间 并 无 先后 顺序 ,因此 设计 者 通常 采用 无 序列 表 
实现 导航 。 由 于 无 序列 表 本 身 就 是 纵向 排列 的 ,因此 仅 








关 一 起 吃苦 的 幸福 


图 5-35 列表 的 图 像 修 饰 符 的 
预览 效果 


需 少许 改造 即 可 实现 精美 的 列表 模式 纵向 导航 。 本 节 以 制作 实例 的 方式 讲解 纵向 导航 的 


实现 。 
【案例 5-10】 纵向 导航 。 


人 启动 Dreamweaver CS6, 创 建新 站 点 ,并 在 其 中 建立 存放 图 像 的 文件 夹 ,将 所 用 素 


材 复制 到 该 文件 夹 中 。 


@ 新 建 HTML 5 文档 ,创建 一 个 名 为 page_nav 的 nav 容器 ,并 在 其 中 创建 一 组 无 序 


列表 ,页 面 结 构 如 图 5-36 所 示 。 


在 此 页 面 结构 中 ,所 有 文字 均 被 二 li 二 标签 所 包 庄 ,由 于 这 些 文字 都 是 超 链 接 , 所 以 
又 被 二 a 二 标签 所 包裹 ,为 了 呈现 “我 的 首页 ”文字 链接 与 其 他 导航 的 区 别 之 处 ,这 里 拟定 


义 current 类 规则 来 单独 解决 这 个 问题 。 


在 未 添加 任何 CSS 规则 的 情况 下 ,预览 效果 如 图 5-37 所 示 。 
@ 在 本 页 面 顶 部 的 head 区 域内 ,编写 对 应 的 CSS 样式 ,如 图 5-38 所 示 。 
@ 保存 当前 文件 后 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-39 所 示 。 


第 5 章 ”浮动 .定位 和 列表 





boay> 
<nav id="page_nav"> 
<ul> 
<li><a href="#" class="current"> 我 的 首页 </a></1i>| 
<1i><a href="#"> 今 日 焦点 </a></1i> 
="#"> 用 车 服务 </a></11> 










<li><a hr 自驾 精 选 </a></15> 

<li><a href="#"> 汽 车 视频 c/a></11i> 

<1li><a href="#"> 试 驾 评 伸 </a></11> 
</ul> 
</nav> 
</body> 





图 5-36 案例 5-10 的 页 面 结构 图 5-37 案例 5-10 的 当前 预览 效果 





tyle type="text/css"> 
#page_nav { 
width: 130px; 
border: 1px solid #ccccce; 
padding: 3px; 
font: 12px/18px Arial, sans-serif; 
) 
#page nav w ( 
margin: 07 
padding: 0; 
#page nav 1i 1 
list-style: none; 
border-bottom: 1px solid #ffce88;/* 设 置 列表 项 之 间 的 间隔 线 */| 
} 
#page nav liat 
display: block; 
background: #fbd346 url(menu bg.jpg) repeat-y left; 
color: #000; 
text-decoration: none;/* 取 消 超 树 接 文字 下 划 线 效果 */ 
padding; 5px 5px 10px 15px;/* 设 置 内 边 距 ， 目的 是 将 a 元 素 
所 在 的 容器 扩展 出 一 定 的 空间 ， 用 于 显示 背景 图 像 */ 
} 
#page_ nav 1i a:hover { 
background: #f7941d url(menu h.jpg) repeat-x top; 





) 
#page_nav 11 a.current, #page nav 11 a:hover.current { 
background: #f7941d url(current.jpg) repeat-x top; 


} 
</style> 








图 5-38 案例 5-10 的 CSS 规则 图 5-39 纵向 导航 的 预览 效果 


这 里 需要 注意 的 是 ,CSS 样式 规则 中 通过 无 序列 表 将 导航 整合 起 来 ,再 使 用 
background 属性 多 次 引用 不 同 的 图 像 呈 现 出 多 样 的 效果 。 

伪 元 素 a:hover 在 CSS 样式 中 的 含义 是 超 链接 鼠标 悬 停 时 的 状态 ,通过 改变 其 中 的 
背景 图 像 ,实现 鼠标 悬 停 在 文字 链接 时 背景 交替 变化 的 效果 。 


5.3.4 横向 导航 


5. 3. 3 小 节 已 经 讲述 了 纵向 导航 的 实现 方法 ,如 果 想 要 让 列表 横向 
排列 ,float 属性 起 到 了 至 关 重 要 的 作用 ,这 也 是 横向 导航 实现 的 核心 所 
在 。 下 面 通过 实例 来 讲述 横向 导航 的 实现 方法 ,请 读者 仔细 体会 float 
属性 所 起 的 作用 。 

【案例 5-11】 横向 导航 。 

@ 启动 Dreamweaver CS6 ,创建 新 站 点 ,并 在 其 中 建立 存放 图 像 的 文件 夹 ,将 所 用 素 
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材 复制 到 该 文件 夹 中 。 

@ 新 建 HTML 5 文档 ,创建 一 个 名 为 nav 的 DIV 容器 ,并 在 其 中 创建 一 组 无 序列 
表 , 页 面 结构 如 图 5-40 所 示 。 在 未 添加 任何 CSS 规则 的 情况 下 ,预览 效果 如 图 5-41 
所 示 。 

@ 为 了 让 列表 横向 排列 ,这 里 需要 对 列表 设置 浮动 效果 ,在 本 页 面 顶部 的 head 区 域 
内 ,编写 对 应 的 CSS 样式 ,如 图 5-42 所 示 。 


ye EYE=nEERE7ESS9y 
pi 

margin: 0; 

padding 

border: 








{background: #f5f0e0 url(images/noise.png);} 
#container 1 

height: 800px; 

background: url (images/bg.jpg) center top no-repeat; 





linav { 
width: 700px; 
margin: 0 auto; 
boay> text-align: center; 
|<div id="container"> overflow: hidden; 
<ul id="nav"> ) 
<li><a href="#"> 我 的 首页 </a></1i> pe 2 i 
<1iy<a href="#"> 关 于 我 们 </a></11> floac: lefc:/* 设 置 列表 浮动 效果 ， 其 目的 是 让 列表 枢 向 排列 */ 
<li><a href="#"> 我 的 工作 </a></11>| Re 
<1i><a href="#"> 联 系 我 们 </a></1i> 





ul#nav li at 





</ul> display; block; 
</div> width: 97px; 
/body> height: 77px; 





padding: 72px 0 0 0; 
图 5-40 案例 5-11 的 页 面 结构 margin: 0 32px 0 32px; 

font: 18px "微软 雅 黑 "; 

color: #9c5959; 

text-shadow: 0 1px 3px #c4bda6;/* 设 置 字体 阴影 效果 */ 

text-decoration: none; 

background: url(images/label.png) 0 -149px no-repeat; 
bl#nav 11 a:hover { 

background: url(images/label.png) 0 0 no-repeat; 

color: #eeegd9; 

text-ahadow: 0 2px 3px #4c2222;/* 设 置 字体 阴影 效果 */ 





} 
bl#nav 1i a.js:hover { 
background: url(images/label.png) 0 -149px no-repeat; 














/style> 


图 5-41 案例 5-11 的 当前 预览 效果 图 5-42 案例 5-11 的 CSS 规 则 








@ 保存 当前 文件 后 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-43 所 示 。 











5-43 ”横向 导航 的 预览 效果 
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需要 特别 注意 的 是 ,在 CSS 样式 规则 中 ,1 元素 除 了 有 盛 放 列表 项 内 容 的 作用 外 ,由 
于 应 用 了 float 属性 ,所 以 变 为 横向 排列 。 此 外 ,为 了 使 鼠标 悬 停 效 果 更 加 动感 ,还 增加 了 
JavaScript 脚本 ,具体 内 容 请 查阅 源 文件 ,这 里 不 再 缆 述 。 


5.3.5 图 文 信息 列表 


图 文 信息 列表 的 应 用 无 处 不 在 ,例如 ,天 猫 、 淘 宝 网 和 京东 网 等 诸多 门户 网 站 ,其 中 用 





于 显示 产品 的 列表 都 是 图 文 信息 列表 ,如 图 5-44 所 示 。 









¥29.90 84757t/500g 
【 百 看 味 】 衬 果 零食 干果 奶油 味 夏 威 殉 
百草 味 让 稻 店 





¥29.90 s475 元 5009 
【百草 味 】 坚 果 干 果 季 食 长寿 果 美国 
百草 味 旗舰 店 


月 成 交 6.0 万 笔 评 从 64 万 篇 月 成 交 2.0 万 笔 评价 47 万 入 








图 5-44 图 文 信息 列表 


图 文 信息 列表 就 是 将 列表 内 容 以 图 像 的 形式 在 页 面 中 体现 ,可 以 简单 地 理解 为 图 片 
列表 附带 简短 的 文字 说 明 。 下 面 以 制作 实例 的 形式 讲解 图 文 信息 列表 的 实现 。 

【案例 5-12】 图 文 信息 列表 。 

J@ 启动 Dreamweaver CS6 ,创建 新 站 点 ,并 在 其 中 建立 存放 图 像 的 文件 夹 ,将 所 用 素 
材 复制 到 该 文件 夹 中 。 

@ 新 建 HTML 5 文档 ,在 其 中 创建 名 为 box 的 DIV 容器 ,并 在 其 内 部 创建 一 组 无 序 
列表 ,页 面 结构 如 图 5-45 所 示 。 











图 5-45 案例 5-12 的 页 面 结构 





从 页 面 结构 可 以 分 析出 ,box 容器 用 于 盛 放 所 有 元 素 ;无 序列 表 将 图 像 信息 和 文字 信 
息 组 合 在 一 起 ;二 img 二 标签 用 于 盛 放 产品 的 图 像 ;二 strong 标 签 用 于 戌 放 产 品 对 应 的 
文字 ;二 span 二 标签 和 二 em 标 签 用 于 显示 产品 打折 前 后 的 价格 信息 。 需 要 提醒 读者 的 
是 ,在 实际 工作 中 需要 根据 具体 情况 ,增加 或 删除 某 些 标签 来 完善 相应 的 功能 ,并 非 图 文 
信息 列表 必须 有 上 述 的 几 种 标签 。 

@ 在 没有 CSS 样式 美化 的 情况 下 ,图片 和 说 明文 字 均 以 列表 模式 显示 ,通过 浏览 器 


本 
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解析 后 的 效果 如 图 5-46 所 示 。 

@ 在 本 页 面 项 部 的 head 区 域内 ,编写 初始 化 的 CSS 样式 ,如 图 5-47 所 示 。 

@ 为 了 列表 能 够 横向 排列 ,这 里 使 用 “float:left;” 实 现 这 种 效果 ,并 且 增 加 外 边 距 以 
美化 显示 效果 。 此 时 ,由 于 设置 了 浮动 属性 ,并 且 又 增加 了 外 边 距 ,IE 6 可 能 会 产生 双 倍 
间距 的 bug, 所 以 再 增加 “display:inline; ”规则 以 解决 该 问题 ,具体 的 样式 代码 如 图 5-48 
所 示 。 保 存 当 前 文件 后 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-49 所 示 。 





style type="text/css"> 
bl, 1i, img { 
margin: 0; 
padding: 0; 
border: 0; 
}/* 青 除 本 页 面 所 用 元 素 的 默认 属性 */ 


#box { 


width; 450px; 

height: 350px; 

margin: 0 auto; 
font-size: 12px; 
padding: 10px 0 0 25px; 
border: 2px solid #ccc; 





图 5-47 初始 化 的 CSS 样式 规则 





nl 11 1 
width: 120px; 
floac: lefc;/* 设 置 列表 项 浮动 ， 使 其 栅 向 排列 */ 
margin: 0 25px 12px 0;/* 设 置 列表 项 的 外 边 距 */ 
1ist-style: none;/* 清 除 列表 默认 风格 */ 
display: inline;/* 为 避免 TE6 产 生 双 倍 间距 的 bug， 增 加 该 规则 */ 








图 5-46 未 经 CSS 样式 美化 的 预览 效果 图 5-48 ”一 ul 二 标签 下 过 li 这 标签 的 样式 规则 


品 国文 信息 列表 


¥80.0 Ya59.0 





图 5-49 初步 美化 后 的 预览 效果 
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G@ 为 了 使 页 面 更 加 美观 ,还 需要 继续 添加 CSS 样式 规则 。 这 里 将 超 链 接 a 元 素 块 状 
化 ,使 其 具有 宽 高 属性 ,并 且 清 除 超 链 接 下 划 线 效果 ;将 strong 元 素 也 块 状 化 ,改变 其 颜 
色 ; 将 span 元 素 和 em 元 素 附加 不 同 的 颜色 ,并 将 em 元 素 内 的 文字 增加 删除 线 效果 。 更 
为 具体 的 规则 如 图 5-50 所 示 。 


ia 
display: block; 

























text-decoration: none;/* 清 除 超 链接 下 划 线 效果 */ 
text-align: center;/* 设 置 居中 显示 */ 


ul 1i a strong 
display: block; 
width: 120px; 
line-height; 20px;/* 设 置 行 高 ,控制 文字 秋 直 距离 */ 
font-weight: normal;/* 设 置 字体 重量 为 普通 */ 
color: #333; 


bl 1i a span { 
display: block; 
width: 120px; 
line-height: 20px; 
color: #F60; 

bl 1i a span em { 
font-style: normal; 
color: #666; 
text-decoration: line-chroughz/* 设 置 出 除 线 效果 */ 


</style> 


图 5-50 更 丰富 的 CSS 样式 规则 





@ 保存 当前 文件 后 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-51 所 示 。 


re RT 小 猫 当当 (第 二 季 ) 


¥47.0 ¥99-8 


ps we TIY 简 易 家 有 具 
¥42.8 ¥i88 





图 5-51 案例 5-12 的 最 终 预 览 效 果 


总 地 来 说 ,图 文 信息 列表 主要 使 用 的 是 无 序列 表 和 浮动 效果 来 完成 的 ,其 整体 结构 也 
是 根据 实际 需要 添加 或 删 减 部 分 结构 标签 配合 具体 功能 而 定 的 。 读 者 可 以 改变 其 中 的 部 
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分 结构 ,自行 编写 CSS 样式 规则 完善 或 改变 网 站 的 具体 功能 ,这 里 不 再 芍 述 ， 
5.4 ”过 程 指导 一 一 “五 月 美食 节 专 场 ” 网 页 的 设计 与 制作 


本 节 主 要 运用 无 序列 表 、CSS 浮动 、 相 对 定位 和 绝对 定位 的 基本 知识 ,完成 “五 月 美 
食 节 专场 ”网 页 的 设计 与 制作 。 通 过 本 节 的 练习 ,读者 能 够 充分 掌握 CSS 定位 在 实际 工 
作 中 的 应 用 。 


5.4.1 过 程 分 析 


通过 对 实际 任务 的 理解 ,本 节 需 要 完成 的 页 面 最 终 效 果 如 图 5-52 所 示 , 从 页 面 整个 
布局 来 看 ,主体 内 容 拟 采用 无 序列 表 盛 放 产 品 信息 ,而 无 序列 表 本 身 拟 采用 相对 定位 和 绝 
对 定位 混合 使 用 的 方式 实现 页 面 布局 。 通 过 深思 熟 虑 ,页 面 布 局 如 图 5-53 所 示 。 





车 “DR 生 7 水 免 单 局 了 











5-52 最终 效果 图 


5.4.2 步骤 详解 


1. 前 期 准备 工作 

(1) 启动 Dreamweaver CS6 ,完成 创建 站 点 的 过 程 。 在 站 点 中 创建 images 和 style 
两 个 文件 夹 ,分 别 存放 页 面 修饰 图 片 和 CSS 样式 文件 。 

(2) 创建 HTML 5 空白 文档 ,并 命名 为 index. html。 创 建 一 个 外 部 CSS 样式 表 文 
件 ,将 这 个 CSS 文 件 保存 在 站 点 的 style 文件 夹 下 ,并 命名 为 style. css。 

(3) 在 Dreamweaver CS6 的 “CSS 样式 ”面板 中 单 击 “ 附 加 样式 表 ” 按 钮 轿 , 弹 出 “ 链 
接 外 部 样式 表 ” 对 话 框 ,将 之 前 创建 的 style. css 外 部 样式 文件 链接 到 index. html 页 面 。 
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wrapper 


container 











header 














main 















































main 















































main 



































footer 

















图 5-53 “五 月 美食 节 专 场 ”网 页 的 布局 示意 图 


2. 头 部 区 域 的 制作 

(1) 将 光标 定位 在 设计 视图 的 页 面 中 。 在 “插入 ”面板 的 “常用 ”类 别 中 单 击 “ 插 入 Div 
标签 ”按钮 。 

(2) 在 弹出 的 对 话 框 的 “插入 ”下 拉 菜 单 中 选择 “在 插入 点 "选项 ,在 ID 中 输入 
wrapper, 单 击 “ 确 定 ” 按 钮 , 即 可 创建 wrapper 容器 。 

(3) 切换 到 style. css 文件 中 ,创建 系列 初始 化 规则 ,如 图 5-54 所 示 。 

(4) 在 名 为 wrapper 的 DIV 容器 内 部 ,创建 相互 嵌 套 的 container 容器 和 header 容 
器 ,此 时 页 面 结 构 如 图 5-55 所 示 。 这 里 wrapper 容器 用 于 对 整个 页 面 进行 总 体 控制 ， 
container 容器 用 于 实现 宽屏 两 侧 图 像 的 显示 ,header 容器 用 于 盛 放 页 面 头 部 的 宣传 
图 像 。 

(5) 在 header 容器 内 部 插入 预先 制作 完成 的 宣传 图 像 ,并 在 style. css 文件 中 针对 
container 容器 编写 规则 ,如 图 5-56 所 示 。 最 后 ,通过 浏览 器 预览 后 的 效果 如 图 5-57 
所 示 。 





“Tt 
margin: 0; 
padding: 0; 
border: 0; 


-clear { 
clear: borh; 


body { 
background: #96E6F1; 
color: #000; 
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) body> 
#wrapper ( <div id="wrapper"> container 《 
background: <div id="container"> height: auto; 
url(../images/header-bg-01.jpg) <div id="header"></div>| margin: 0 auto; 
no-repeat center top; </div> padding: 0; 
height: auto; </div> width: 980px; 
</body> 

















图 5-54 ”页面 初 始 化 CSS 规则 图 5-55 初始 页 面 结 构 图 5-56 ”container 容器 


的 CSS 规则 


“Fe * 巧 口 民 生 7 号 粮油 水 免 单 和 hp 一 wot 


于 





图 5-57 页 面 头 部 区 域 预览 效果 


3. 主体 区 域 的 制作 

(1) 在 设计 视图 中 ,在 “插入 ”面板 的 “常用 ”类 别 中 单 击 “ 插 入 Div 标签 ”按钮 ,弹出 
“插入 Div 标签 ”对 话 框 。 在 “插入 ”下拉 菜单 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 的 下 拉 
菜单 中 选择 二 div id= "header" 二 。 在 ID 中 输入 top, 单 击 “ 确 定 ” 按 钮 , 即 可 在 header 容 
器 后 面 插入 top 容器 。 

(2) 使 用 同样 的 方法 ,在 top 容器 后 面 插入 main 容器 。 

(3) 切换 到 style. css 文件 中 ,为 top 容器 和 main 容器 创建 CSS 规则 ,如 图 5-58 所 示 。 


ED T 
background: url(../images/pro-bg.jpg) no-repeat; 
height: 62px; 
margin: Spx 0 Spx; 





4main { 
width: 960px: 
margin: 10px auto; 
background: #5BA4C7; 
padding: 10px 0 10px 20px; 








图 5-58 top 容器 与 main 容器 的 CSS 规则 
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(4) 根据 布局 示意 图 的 规划 ,在 main 容器 内 部 创建 box_01 容器 ,并 在 box_01 容 
器 内 部 创建 一 组 无 序列 表 , 并 在 每 个 列表 项 内 部 创建 标题 和 段落 ,具体 结构 如 
图 5-59 所 示 。 





<aiv id="wrapper™"> 
<div id="container"> 
<div id="header">lKimg sr.:.|</div> 
xdiv id="top"></div> 
<div id="main"> 
<diV id="box 01"> 
<ul id="pro" class="ul-style"> 
ges/01.jpg" width="160" height="160"> 
> 美国 进口 风味 扁桃 仁 </a></h3> 
em>199 </em><span> 活 动 价 : &yen; 149</span></P> 
<div class="newview"></div> 
</1li> 
<li><img src="images/02.jpg" width="160" height="160"> 
<h3><a href="#"> 日 本 进口 巧克力 夹心 薄 腾 饼 </a></h3> 
<P> 售 价 : syen; <em>200 </em><span> 活 动 价 : gyen; 150</span></P> 
xdiv class="newview"></div> 
</1i> 
<1li><img src="images/03.jpg" width="160" height="160"> 
<h3><a href="#"> 素 国 进口 香 胸 豆 米 片 </a></h3> 
<P> 售 价 : &yen; <em>240 </em><span> 活 动 价 : &yen; 190</span></P> 
<div class="newview"></div> 
</1i> 
<li><img src="images/01.jpg" width="160" height="160"> 
<h3><a href="#"> 美 国 进口 风味 扁桃 仁 </a></h3> 
<P> 售 价 : &yen; <em>199 </em><span> 活 动 价 : syen; 149</span></P> 
<div class="newview"></div> 
</1i> 
<1li><img src="images/02.jpg" width="160" height="160"> 
<h3><a href="#"> 日 本 进口 巧克力 夹心 簿 脆 饼 </a></h3> 
<P> 售 价 : &yen; <em>200 </em><span> 活 动 价 : &yen; 150</span></P> 
<div class="newview"></div> 
</1i> 
</al> 
<div class="clear"></div> 
</div> 
</div> 
</div> 
/div> 



























图 5-59 box_01 容器 的 结构 代码 


需要 特别 指出 的 是 ,页 面 结 构 中 的 二 div class= 王 "newview" 二 一 /div 二 容器 拟 盛 放 产 
品 左 上 角 的 新 品 标志 ,该 标志 采用 相对 定位 的 方式 将 图 像 定 位 于 左上 角 , 起 到 美化 
作用 。 

(5) 切换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 5-60 和 图 5-61 所 示 。 通 过 浏 
览 器 预览 后 的 效果 如 图 5-62 所 示 。 

(6) 根据 布局 示意 图 的 规划 ,参照 步骤 (1) 一 步骤 (4) 的 方法 ,增加 相同 的 结构 内 容 ， 
即 可 完成 主体 的 制作 。 


4. footer 区 域 的 制作 

(1) 在 container 容器 后 面 插入 footer 容器 ,输入 网 站 的 版 权 内 容 。 返 回 style. css 文 
件 , 创 建 相关 CSS 规则 ,如 图 5-63 所 示 。 

(2) 保存 当前 页 面 文档 ,通过 浏览 器 预览 最 终 完成 本 页 面 的 制作 。 
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ul-style IT pT 








width: 100: 
1-style { text-align: center; 
list-style: none; color: #33: 
} font-weight: bold; 


.ul-style 1i +t 
float: left; 
background: #FFF; 
margin: Opx 32px Opx Opx; 
width: 160px; 
position: relative; 


margin-top: Spx; 
font-size: 12px; 





.ul-style 11 P em 工 
text-decoration: 
line-through; 





.ul-style 1i h3 ( 
width: 100%; 
overflow: hidden; 
text-align: center; 
padding: 4px 0 0 
margin-top: Spx; 


ul-style 1i p span ( 
color: #900; 


newview { 
background: 

url(../images/icon-new.gif) 

no-repeat left top; 
height: 23px; 
width: 33px; 
position: absolut 
top: 0 
left: 





) 

.al-aryle 1i h3 a { 
font-weight: normal; 
color: #666; 
text-decoration: none; 
font-size: 12px; 




















图 5-60 图 文 





图 5-61 图 文 信息 列表 CSS 规则 (2) 


EE 


进口 会 品 油 129 元 减 20 元 
竺 动 时 间 : 5.5-5.17 


erTt 

background: #5BA4C7; 
height: 48px; 
margin-top: 20px; 
font-size: 12px; 
color: #FFF; 
padding-top: 15px; 
text-align: center; 





图 5-63 footer 容器 的 CSS 规则 
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5.5 自主 任务 一 一 手机 专卖 网 ”的 制作 


参照 本 章 所 讲 的 内 容 ,制作 * 手 机 专卖 网 ”的 主页 ,在 制作 过 程 中 注意 体会 相对 定位 和 
绝对 定位 的 应 用 。 页 面 最 终 效果 和 布局 如 图 5-64 与 图 5-65 所 示 。 











图 5-64 最终 预览 效果 图 





wrapper 





top 








header 








content 


box 1 box 2 








box_3 box_4 



































footer 


5-65 “手机 专卖 网 ”主页 的 布局 示意 图 
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5.6 习题 


1 
2 
3 
4 


. 列表 有 几 种 类 型 ? 简 述 其 在 网 页 中 的 应 用 。 
. 纵向 的 列表 导航 转变 为 横向 的 列表 导航 ,其 本 质 是 什么 ? 
. 在 页 面 中 创建 多 个 DIV 容器 ,使 用 相对 定位 的 知识 制作 图 5-66 所 示 的 布局 。 


.应 月 


日 本 章 知 识 ,制作 图 5-67 所 示 的 页 面 ,要 求 制 作 过 程 中 认真 体会 图 文 信息 列表 





的 制作 方法 。 
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图 5-66 习题 3 预览 效果 
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图 5-67 习题 4 预览 效果 
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表格 与 表单 


【本 章 导读 】 

随 着 CSS 的 发 展 ,表格 布局 时 代 已 经 结束 ,表格 的 用 途 回 归 到 存放 各 类 数据 信息 上 
来 ;表单 能 够 帮助 Web 站 点 获取 访问 者 的 信息 , 它 是 人 机 交互 必 不 可 少 的 元 素 。 本 章 围 
绕 表格 与 表单 两 类 元 素 , 着 重 讲解 它们 在 Dreamweaver 中 的 操作 方法 ,以 及 如 何 使 用 
CSS 灵活 控制 .美化 这 两 类 元 素 。 

【学 习 目标 】 

名 掌握 插入 表格 、 编 辑 表格 的 基本 操作 ; 

如 掌握 常见 表单 对 象 的 使 用 方法 ; 

名 认 知 并 掌握 CSS 控制 .美化 表格 和 表单 的 方法 。 


6.1 表格 的 创建 与 编辑 


当 页 面 中 包含 便于 罗列 的 多 组 数据 时 ,使 用 表格 元 素 进行 显示 是 非 
常 不 错 的 选择 。 而 使 用 默认 设置 创建 的 表格 在 美观 方面 不 能 令 人 满意 ， 
这 时 通常 使 用 CSS 规则 对 其 进行 控制 。 


6.1.1 创建 表格 


Dreamweaver CS6 提供 多 种 创建 表格 的 方法 ,下 面 介绍 如 何 创建 表格 。 
【案例 6-1】 创建 表格 。 
@ 启动 Dreamweaver CS6 ,新建 空白 HTML 5 文档 ,将 光标 定位 在 需要 插入 表格 的 





位 置 。 
@ 按 Ctrl 十 Alt 十 T 键 ,或 者 在 菜单 栏 中 执行 “插入 ”一 “表格 "命令 ,或 者 在 “插入 ” 面 
板 的 “常用 ”类 别 中 单 击 国 按 钮 。 

@ 这 时 弹出 如 图 6-1 所 示 的 对 话 框 。 在 该 对 话 框 中 ,主要 参数 含义 如 下 。 

总行 数 : 指 的 是 拟 创建 表格 中 行 的 数目 。 

名 列 数 : 指 的 是 拟 创建 表格 中 列 的 数目 。 

芯 表 格 宽度 : 以 像素 为 单位 或 按 占 浏览 器 窗口 宽度 的 百分比 指定 表格 的 宽度 。 

名 边框 粗细 : 以 像素 为 单位 ,设置 表格 边框 的 宽度 。 若 设置 为 0, 则 在 浏览 时 不 显示 
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表格 边框 。 

芯 单 元 格 边 距 : 确定 单元 格 边框 与 单元 格 内 容 之 间 的 像素 数 。 

忌 单元 格 间距 : 相 邻 的 表格 单元 格 之 间 的 像素 数 。 

避 无 : 对 表格 不 启用 列 或 行 标题 。 

气 左 : 将 表格 的 第 一 列 作为 标题 列 。 

名 顶部 : 将 表格 的 第 一 行 作为 标题 行 。 

如 两 者 : 能 使 用 户 在 表格 中 输入 列 标题 和 行 标题 。 

气 标题 : 显示 在 表格 外 的 表格 标题 。 

气 摘要 : 表格 的 说 明 信 息 。 

@ 根据 需要 设置 相关 信息 ,最 后 单 击 “ 确 定 ” 按 钮 , 即 可 插入 一 组 表格 。 

@ 将 光标 定位 在 某 个 单元 格 中 ,直接 输入 文字 , 即 可 在 表格 中 插入 文字 ;直接 插入 图 
像 , 即 可 完成 图 像 的 插入 ;再 次 执行 菜单 栏 中 的 “插入 ”一 “表格 ”命令 ,可 以 在 表格 内 其 套 
另 一 表格 ,预览 后 效果 如 图 6-2 所 示 。 



















































































































































































表格 大 小 
和 有数 5 到 数 3 
表格 宽度 100 [区 3EE >] 站 创建 表格 
边框 息 绍 : ! 你 < efa 
单元 格 边 距 。。 图 | 
单元 格 间距 轩 表格 中 可 以 插入 文字 | 表格 中 可 以 插入 
标题 | 图 像 
oe - 本 和 文字 即 可 完 
简要 - 本 
EL CC 本 CC 
图 6-1 “表格 "对 话 框 图 6-2 创建 表格 


6.1.2 单元 格 属性 设置 


表格 中 行 与 列 交叉 的 部 分 称 为 单元 格 , 它 是 组 成 表格 的 最 小 单位 ,单个 数据 的 输入 和 
修改 都 是 在 单元 格 中 进行 的 。 将 光标 定位 在 某 个 单元 格 中 ,属性 面板 即刻 显示 有 关 单 元 
格 的 相关 属性 ,如 图 6-3 所 示 ,其 中 各 项 含义 如 下 。 





-BJ 王 江 组 埋 标 是 
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6-3 ”设置 单元 格 属性 
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(1) 水 平 : 用 于 设置 单元 格 内 容 的 水 平 对 齐 方式 ,包含 默认 、 左 对 章 、 右 对 齐 和 居中 
对 齐 4 种 选项 。 

(2) 垂直 : 用 于 设 管 单元 格 内 容 的 重 直 对 齐 方式 ,包含 默认 、 顶 端 、 居 中 、 底 部 和 基线 
5 种 选项 。 

(3) 宽 和 高 : 以 像素 为 单位 或 按 整 个 表格 宽度 或 高 度 的 百分比 为 单位 ,计算 所 选单 
元 格 的 宽度 和 高 度 。 

(4) 不 换行 : 勾 选 该 复 选 框 , 则 单元 格 中 的 所 有 文本 都 在 一 行 上 。 对 于 超出 宽度 的 
内 容 , 单 元 格 会 自动 加 宽 来 容纳 所 有 数据 。 

(5) 标题 : 勾 选 该 复 选 框 , 则 将 所 选 的 单元 格格 式 设置 为 表格 标题 单元 格 。 默 认 情 
况 下 ,表格 标题 单元 格 的 内 容 为 粗 体 并 且 居 中 。 

(6) 背景 颜色 : 用 于 设置 单元 格 的 背景 颜色 。 

(7) 页 面 属性 : 单 击 该 按钮 ,可 以 打开 ”页 面 属 性 ?对 话 框 ,对 页 面 属性 进行 相关 设置 。 

(8) 回 按 钮 : 单 击 该 按钮 ,可 将 所 选 的 单元 格 \ 行 或 列 合 并 为 一 个 单元 格 。 当 选择 的 
单元 格 形成 矩形 或 直线 的 块 时 此 按钮 才 被 激活 。 

(9) 股 按 钮 : 单 击 该 按钮 ,可 将 一 个 单元 格 分 成 两 个 或 多 个 单元 格 。 当 选择 的 单元 
格 多 于 一 个 时 , 则 此 按钮 将 禁用 。 


6.1.3 单元 格 基本 操作 


1. 选择 单元 格 

【案例 6-2】 选择 单元 格 。 

| 启动 Dreamweaver CS6 ,新 建 空白 HTML 5 文档 ,插入 一 组 5 行 5 列 的 表格 。 

@ 将 光标 定位 在 某 个 单元 格 内 , 拖 动 鼠 标 , 即 可 选中 一 个 或 多 个 连续 的 单元 格 。 此 
外 ,在 选择 过 程 中 按 下 Ctrl 键 可 以 选择 多 个 不 连续 的 单元 格 ; 按 下 Shift 键 可 以 选择 矩形 
区 域内 的 所 有 单元 格 。 

@ 将 光标 定位 在 表格 的 上 边缘 或 左边 缘 , 当 鼠标 指针 变 为 箭头 形状 时 , 单 击 即 可 选 
择 一 整 列 或 一 整 行 ,如 图 6-4 所 示 。 
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图 6-4 定位 光标 在 表格 边缘 即 可 选择 列 或 行 
@ 若 要 选择 整个 表格 ,只 须 将 光标 移动 到 表格 的 上 下 边框 ,或 表格 的 4 个 顶 角 , 当 光 
标 变 成 表格 网 格 形状 各 时 , 单 击 即 可 选择 整个 表格 ,如 图 6-5 所 示 。 


2. 删除 单元 格 
选择 完整 的 一 行 或 列 , 然 后 在 菜单 栏 中 执行 “编辑 ”~ 清除 ”命令 ,或 者 直接 按 Delete 
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图 6-5 选择 整个 表格 





键 即 可 删除 完整 的 一 行 或 列 。 


3. 合并 与 拆 分 单元 格 

【案例 6-3】 合并 与 拆 分 单元 格 。 

OO 启动 Dreamweaver CS6 ,新建 空白 HTML 5 文档 ,插入 一 组 2 行 2 列 的 表格 ,并 在 
其 中 插入 多 张 图 像 。 

@ 选择 多 个 连续 的 单元 格 , 右 击 , 在 弹出 的 右键 菜单 中 执行 “表格 "一 “合并 表格 " 命 
邻 , 或 者 在 属性 面板 中 单 击 国 按钮 , 即 可 将 多 个 单元 格 合 并 
为 一 个 ,如 图 6-6 所 示 。 合 并 后 的 单元 格 内 容 将 重新 置 于 新 
的 单元 格 中 。 

@ 在 表格 中 选择 一 个 待 拆 分 的 单元 格 , 然 后 在 菜单 栏 
中 执行 “修改 ”>“ 表 格 ”>“ 拆 分 表格 "命令 。 或 者 在 属性 面 | 
板 中 单 击 扔 按钮 ,也 可 以 右 击 , 在 弹出 的 右键 菜单 中 执行 
“表格 ”一 “ 拆 分 单元 格 " 命 令 。 

@ 这 时 弹出 如 图 6-7 所 示 的 对 话 框 。 根 据 实际 需要 ,选择 如 何 拆 分 单元 格 ,设置 完 
成 后 单 击 “ 确 定 ” 按 钮 即 可 。 图 6-8 所 示 的 是 将 单元 格 拆 分 为 1 行 2 列 的 单元 格 。 











图 6-6 合并 单元 格 


把 单元 格 拆 分 回 行 @) 
加 果品 


政局:2 图 











图 6-7 “ 拆 分 单元 格 ? 对 话 框 图 6-8 ” 拆 分 单元 格 后 的 效果 


4. 增加 行 或 列 

【案例 6-4】 增加 行 或 列 。 

@ 将 光标 定位 在 要 添加 行 ( 列 ) 单 元 格 的 内 部 , 右 击 , 在 弹出 的 右键 菜单 中 执行 “ 表 
格 ” 一 “插入 行 或 列 ” 命 令 。 

@ 这 时 弹出 如 图 6-9 所 示 的 对 话 框 。 根 据 实际 需要 ,设置 增加 的 行 数 或 列 数 ,以 及 
新 增 列 或 行 的 位 置 。 设 置 完 成 后 单 击 “ 确 定 ” 按 钮 , 即 可 新 增 一 列 或 一 行 。 图 6-10 所 示 的 
是 在 表格 中 增加 行 的 效果 。 


第 6 章 表格 与 表单 

















图 6-9 “插入 行 或 列 ” 对 话 框 图 6-10 ”增加 行 的 效果 


6.2 CSS 在 表格 中 的 应 用 


使 用 Dreamweaver CS6 插入 表格 十 分 简单 ,但 是 表格 的 默认 外 观 一 般 不 能 满足 实际 
工作 的 需要 ,这 就 需要 设计 师 使 用 CSS 的 相关 规则 对 表格 进行 美化 。 


6.2.1 使 用 border-collapse 属性 制作 细 线 表格 国 和 人 


默认 情况 下 ,即便 在 Dreamweaver CS6 中 设置 表格 边框 的 粗细 为 
1 像素 大 小 ,预览 后 的 效果 通常 无 法 令 人 满意 。CSS 中 提供 了 可 以 解决 回 1 
该 问题 的 属性 一 一 border-collapse。 

所 谓 “ 细 线 ”, 是 指 表 格 在 浏览 器 中 显示 的 所 有 边框 宽度 均 只 有 1 个 像素 。 

【案例 6-5】 细 线 表格 。 

| 启动 Dreamweaver CS6 .新建 空白 HTML 5 文档 ,在 “插入 ”面板 的 “常用 ”类 别 中 
单 击 “ 表 格 ” 按 钮 ,弹出 “表格 ”对 话 框 。 

@ 根据 实际 需要 在 “表格 ”对 话 框 中 进行 设置 ,如 图 6-11 所 示 , 单 击 “ 确 定 ” 按 钮 , 创 
建 4 行 2 列表 格 。 

@ 在 表格 中 输入 相关 文字 内 容 , 通 过 浏览 器 预览 此 时 的 页 面 效果 如 图 6-12 所 示 。 
从 图 中 可 以 看 出 ,此 时 表格 的 外 观 还 需要 进一步 改进 。 





























搬 助 功 钨 
标题- 使 用 border-collapse 属 性 制作 绚 续 表 稿 
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使 用 border-collapse 属 性 制作 细 线 表格 
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图 6-11 创建 4 行 2 列 的 表格 6-12 ”表格 初始 预览 效果 
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pa @ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 6-13 所 示 。 


pe 





style type="text/cas"> 

table { 
border: lpx solid #000000; 
font: 14px/1.5em "微软 雅 黑 ": 


caption { 
font-size: 20px; 
margin-bottom: 15px; 
text-align: center; 
} /* 设 置 表 头 文字 效果 */ 
thf 
Color: #F4F4F4; 
border: 1px solid #000000; 
background: #F60; 
} /* 设 置 表格 中 标题 的 样式 (标题 文字 颜色 、 边 框 、 背 景色 ) */ 


tdt 


text-align: center; 
border: 1px solid #000000; 
background: #FF6; 

) /* 设 置 所 有 ta 内 容 单元 格 的 文字 居中 显示 ， 并 添加 黑色 边框 和 背景 色 */ 








图 6-13 ” 细 线 表格 的 CSS 样式 代码 


回 保存 当前 文件 后 ,通过 浏览 器 预览 后 的 效果 ,如 图 6-14 所 示 。 





车 使 用 border-collapse 属 性 制作 细 线 表格 
EE 
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单元 格 B 
































单元 格 C 











图 6-14 加 边框 后 的 预览 效果 


通过 观察 预览 效果 可 以 发 现 , 当 添加 border 边框 属性 后 ,每 个 单元 格 都 有 了 边框 ,而且 
单元 格 之 间 存 在 很 细 的 空白 间距 ,这 种 整体 效果 不 符合 实际 需求 。 如 何 来 解决 这 个 问题 呢 ? 

CSS 样式 中 border-collapse 属性 能 够 解决 这 个 问题 。 该 属性 的 主要 功能 就 是 设置 表 
格 的 边框 是 否 被 合并 为 一 个 单一 的 边框 , 它 包 含 separate 和 collapse 两 个 属性 值 ,使 用 前 
者 边框 会 被 分 开 , 使 用 后 者 边框 将 会 合并 。 

在 CSS 样式 代码 的 table 类 型 选择 符 中 增加 border-collapse 属性 ,如 图 6-15 所 
示 。 通 过 浏览 器 预览 后 的 效果 ,如 图 6-16 所 示 。 


abie { 
border: lpx solid #000000; 
font: 14px/1.5em "微软 雅 黑 ": 
border-collapse: collapse;/* 合 并 单元 格 之 间 的 边 */| 











6-15 ”增加 border-collapse 属性 


在 实际 工作 中 ,“border-collapse:collapse;” 属 性 可 以 认为 是 必 不 可 少 的 CSS 样式 代 
码 , 如 果 没 有 它 的 帮助 ,影响 的 将 是 整个 表格 的 视觉 效果 。 
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使 用 border-collapse 属 性 制作 细 线 表格 


表格 标题 表格 标题 


单元 格 A 单元 格 D 





单元 格 B 单元 格 E 
单元 格 C 单元 格 F 




















6-16 ” 细 线 表格 的 最 终 预览 效果 


6.2.2 使 用 伪 类 选择 器 制作 隔行 变色 表格 


隔行 变色 表格 在 实际 工作 中 非常 重要 ,因为 它 能 够 为 用 户 提供 可 以 国 党 
参照 的 水 平 线 , 方 便 访问 者 浏览 数据 。 传 统 的 做 法 是 为 表格 的 行 添加 额 各 
外 的 odd( 奇 ) 和 even( 偶 ) 类 规则 ,具体 的 结构 代码 如 图 6-17 所 示 。 i et 

随 着 HTML 5 的 推广 ,应 该 逐渐 避免 传统 做 法 中 那些 用 于 定义 外 国 串 尖 串 世 
观 的 类 名 。 下 面 介绍 CSS 3 中 新 的 选择 器 ,可 以 轻松 实现 上 述 功 
能 而 不 改变 表格 结构 。 

1. 利用 :nth-of-type 实现 隔行 变色 

:nth-of-typeCn) 选 择 器 匹配 属于 父 元 素 的 特定 类 型 的 第 n 个 子 
元 素 的 每 个 元 素 , 这 里 n 可 以 是 数字 ,关键 词 或 公式 。odd 和 even 是 
CSS 提供 的 可 用 于 匹配 奇数 或 偶数 的 子 元 素 的 关键 词 。 

2. 利用 :nth-child 对 齐 文本 

在 默认 情况 下 ,表格 中 的 标题 为 居中 对 齐 ,而 表格 中 的 内 容 为 
左 对 齐 。 可 以 利用 : nth-child 来 增加 表格 中 文本 的 可 读 性 。 

:nth-child(n) 选 择 器 用 于 查找 某 元 素 的 子 元 素 , 这 里 n 可 以 
是 数字 ,关键 词 或 公式 。 例 如 ,选择 所 有 行 ,可 以 这 样 使 用 选择 器 
table tr:nth-child(n) ;如果 想 选择 除 表 头 (第 一 行 ) 之 外 的 所 有 行 ,可 以 这 样 使 用 选择 器 
table tr:nth-childCn 十 2) 。 


3. 具体 做 法 

隔行 变色 表格 的 目标 是 让 相 邻 两 行 表格 的 背景 颜色 显示 为 不 同 颜 色 , 最 简单 的 做 法 
是 找到 表格 中 所 有 的 偶数 行 ,然后 赋予 一 种 背景 色 。 同 样 地 ,也 可 以 找到 表格 中 所 有 奇数 
行 ,然后 赋予 另 一 种 背景 色 。 

【案例 6-6】 nth-of-type 示例 。 

@ 启动 Dreamweaver CS6 ,新 建 空白 HTML 5 文档 ,插入 一 个 8 行 5 列 的 表格 ,并 输 
入 必要 的 文字 。 

@ 在 本 页 面 head 区 域内 部 插入 相关 CSS 样式 ,如 图 6-18 所 示 。 

@ 保存 当前 文件 后 ,通过 浏览 器 预览 后 的 效果 ,如 图 6-19 所 示 。 


















图 6-17 ”传统 隔行 变色 
表格 结构 代码 
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tyle type-"text/cas"> 
table { 

border-collapse: collapse; 
} 
ta, th{ 

border: 1px solid #000000; 





} 


tr:nth-of-type (even) { 
background-color: #FCO; 

} 

tr:nth-of-type (odd) { 
background-color: #F90; 

) 

/style> 





图 6-18 实现 隔行 变色 的 6-19 nth-of-type 的 预览 效果 
CSS 规则 


@ 在 图 6-19 中 , 除 表 头 ( 第 一 行 ) 以 外 的 所 有 文字 均 为 居 左 对 齐 , 这 里 想 要 改变 除 第 
一 行 以 外 的 所 有 行 的 文本 对 齐 方式 ,需要 添加 “tr:nth-child(n 十 2) {text-align: center; }” 
CSS 规则 。 保 存 当前 文件 ,最 后 预览 效果 如 图 6-20 所 示 。 








图 6-20 ”利用 :nth-child 对 齐 文本 预览 效果 


6.3 ”表单 的 创建 与 编辑 


表单 是 网 页 元 素 中 非常 重要 的 元 素 之 一 ,也 是 网 站 是 否 具有 交互 功能 的 重要 体现 。 
表单 主要 负责 数据 采集 , 它 可 以 收集 用 户 的 信息 并 将 其 存储 在 服务 器 中 。 


加 6.3.1 表单 域 


1. 认识 表单 

表单 的 应 用 范围 非常 广泛 ,不仅 用 于 收集 信息 和 反馈 意见 ,还 广泛 
用 于 资料 检索 、 网 上 购物 等 多 种 交互 式 操作 。 一 般 来 说 ,表单 中 包含 文 
本 字段 ,密码 字段 、 单 选 按钮 . 复 选 框 , 弹 出 菜单 、 可 单 击 的 按钮 和 其 他 表单 对 象 ,这 些 表单 
对 象 主要 用 途 就 是 为 了 实现 浏览 者 与 Internet 服务 器 之 间 的 交互 ,图 6-21 所 示 的 就 是 典 
型 的 表单 应 用 。 

总 地 来 说 ,表单 在 网 络 信息 交流 中 具有 重要 作用 ,而 在 Dreamweaver CS6 中 ,设计 者 
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夏 欢迎 注册 360 云 重 要 


邮箱 
人 @ 请 项 入 地 89 膏 用 邮箱 ， 没 有 邮箱 ? 





密码 
和 @ 这 得 应 为 6~20 个 字符 ，(〈 区 分 大 小 瑟 ) 





确认 密码 


芍 











国 我 已 经 阅读 并 同意 «360 用 户 服务 条 款 


图 6-21 表单 的 实际 应 用 








可 以 采用 可 视 化 的 方法 创建 表单 对 象 ,但 如 果 希 望 完成 表单 的 功能 ,还 必须 编写 服务 器 端 
的 脚本 程序 。 

2. 认识 表单 域 

使 用 Dreamweaver CS6 可 以 创建 表单 、 向 表单 中 添加 对 象 以 及 使 用 行为 来 验证 用 户 输 
入 的 信息 等 。 表 单 对 象 包含 在 表单 域 中 ,表单 域 定义 了 一 个 表单 的 开始 和 结束 ,在 HTML 4 
中 所 有 表单 对 象 都 要 放 在 表单 域 中 才 会 生效 ,而 在 HTML 5 中 开发 者 可 以 把 它们 书写 在 任 
何 地 方 ,只 须 为 该 元 素 指定 form 属性 ,属性 值 与 该 表单 的 id 属性 值 相对 应 即 可 。 

创建 表单 域 的 方法 如 下 。 

(1) 启动 Dreamweaver CS6 ,创建 HTML 5 文档 ,将 光标 定位 在 希望 表单 出 现 的 位 
置 上 。 在 “插入 ”面板 中 选择 “表单 ”类别 ,然后 单 击 其 中 的 国 按 钮 。 

(2) 这 时 弹出 如 图 6-22 所 示 的 对 话 框 ,用 户 可 以 根据 实际 情况 对 参数 进行 设置 , 单 
击 “ 确 定 ” 按 钮 后 ,软件 在 页 面 的 设计 视图 中 会 自动 添加 红色 虚线 矩形 ,这 就 是 表单 的 轮廓 


























图 6-22 “标签 编辑 器 -form” 对 话 框 
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2 指示 线 , 如 图 6-23 所 示 。 


pe 





























图 6-23 ”添加 表单 域 


表单 对 应 的 属性 面板 中 各 参数 名 称 及 功能 如 表 6-1 所 示 。 
表 6-1 表单 的 参数 名 称 及 功能 
属性 名 称 功 能 
ID 表单 标识 名 称 | 表单 的 名 称 ,该 名 称 可 以 使 用 脚本 语言 引用 或 控制 该 表单 


name 表单 名 称 表单 的 名 称 ,与 ID 具有 相同 的 意思 
该 属性 用 于 定义 将 表单 数据 发 送 到 哪个 地 方 , 其 值 采 用 URL 的 方式 , 即 














oiion | 和 人 处 理 表单 数据 的 页 面 或 脚本 

默认 值 ; 浏览 器 一 般 默 认 方法 为 GET。 

GET: 把 表单 值 添加 给 URL, 并 向 服务 器 发 送 GET 请 求 。 因 为 URL 被 
method | 方法 


限定 在 8192 个 字符 内 ,所 以 内 容 过 多 的 表单 不 要 使 用 GET 方法 。 
POST: 在 消息 正文 中 发 送 表 单 值 ,并 向 服务 器 发 送 POST 请 求 


设置 发 送 表单 到 服务 器 的 媒体 类 型 , 它 只 在 发 送 方 法 为 POST 时 才 有 效 ， 
ectype “| 编码 类 型 其 默认 值 为 application/x-www-form-urlencode; 如 果 创 建 的 是 文件 上 传 
域 , 则 应 该 选择 multipart/form-data 


_blank: 是 指 在 新 窗口 中 打开 目标 文档 。 

_parent: 是 指 在 显示 当前 文档 窗口 的 父 窗口 中 打开 目标 文档 。 
_self: 是 指 在 当前 窗口 打开 目标 文档 。 

_top: 是 指 在 当前 窗口 的 窗 体内 打开 目标 文档 








target 目标 








6.3.2 常见 表单 对 象 


表单 域 定义 完成 后 ,就 可 以 为 表单 添加 各 种 表单 对 象 了 。 首 先 将 光标 定位 在 表单 域 
内 要 插入 表单 对 象 的 地 方 ,然后 在 “插入 ”面板 的 “表单 "类别 中 选择 要 插入 的 表单 对 象 即 
可 。 下 面 分 别 介绍 常见 表单 对 象 的 使 用 方法 及 其 属性 设置 。 
1. 添加 文本 字段 
【案例 6-7】 添加 文本 域 对 象 。 
在 “插入 ”面板 的 “表单 "类别 中 单 击 [于 按钮 , 即 可 插入 文本 域 表 
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单 对 象 ,如 图 6-24 所 示 。 


二 ERs 忆 CeVzol40121 清 和 网 页 计 ( html5+css3 乒 ) 配套 网 站 cho6\V6-7 二 吉文 本 字段 对 象 html 本 








<body> 
EM <form action="" merhoa="gec” name="abc" id="xyz"> 
<label ": 


</form> 
-bcay> 
</heml> 





图 6-24 ”添加 文本 字段 对 象 


文本 域 属性 面板 中 的 参数 名 称 及 功能 如 表 6-2 所 示 。 
表 6-2 文本 域 属性 面板 中 的 参数 名 称 及 功能 























属 性 对 应 属性 面板 中 的 名 称 功 能 
name 文本 域 该 名 称 是 后 期 程序 处 理 数据 的 依据 
Size 字符 宽度 用 于 设置 文本 域 中 最 多 可 显示 的 字符 数 
maxlength 最 多 字符 数 用 于 设置 文本 域 在 单行 文本 域 中 最 多 可 输入 的 字符 数 
value 初始 值 用 于 设置 在 首次 加 载 表 单 时 文本 域 中 显示 的 值 
class 类 用 于 设置 当前 对 象 应 用 何 种 CSS 规 则 
readonly 只 读 用 于 设置 文本 域 是 否 具有 可 编辑 性 
disabled 禁用 禁用 当前 文本 域 








@ 文本 域 中 除了 能 够 输入 单行 的 文本 外 ,还 能 够 插入 多 行文 本 来 实现 文本 内 容 的 滚 
动 效 果 。 在 文本 域 属性 面板 中 , 单 击 “ 多 行 ” 单 选 按 钮 ,此 时 文本 域 和 属性 面板 均 发 生变 
化 ,如 图 6-25 所 示 。 














6-25 ”多 行文 本 域 


与 单行 文本 域 不 同 的 是 ,多 行文 本 域 属性 面板 中 “字符 宽度 ”设置 对 应 代码 视图 中 的 
cols 属性 ;“ 行 数 ” 设 置 对 应 代码 视图 中 的 rows 属性 。 
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@ 此 外 ,在 文本 域 属性 面板 中 , 单 击 “ 密 码 " 单 选 按钮 ,文本 域 就 变 为 密码 框 了 ,其 
属性 设置 和 单行 文本 域 相同 ,只 不 过 在 预览 时 文本 框 的 内 容 将 以 * ”的 形式 显示 。 

2. 添加 复 选 框 

复 选 框 一 次 可 以 选择 一 个 ,也 可 以 选择 多 个 ,主要 用 于 标记 该 项 内 容 是 否 提前 被 
选中 。 

【案例 6-8】 添加 复 选 框 对 象 。 

@ 创建 表单 域 ,将 光标 定位 在 表单 域 中 。 在 “插入 ”面板 的 “表单 ”类别 中 单 击 “ 复 
选 框 ?按钮 疯 , 即 可 插入 复 选 框 。 在 复 选 框 后 面 输入 相应 的 文字 , 即 可 完成 复 选 框 的 整 
个 内 容 。 

@ 按照 此 种 办 法 ,可 以 添加 多 个 复 选 框 , 如 图 6-26 所 示 。 需 要 特别 注意 的 是 , 若 
要 多 个 复 选 框 组 成 一 组 为 某 一 选项 提供 选择 , 则 需要 将 该 组 内 的 复 选 框 设 置 为 相同 的 


名 称 。 


- | 泛 人 龙 果 日 水 富 桃 日 要 芝 


i 。 
CJ -2 i/1 Wicod Wr-0) 











图 6-26 添加 复 选 框 对 象 


选择 某 一 复 选 框 ,其 属性 面板 中 的 参数 名 称 及 功能 如 表 6-3 所 示 。 
表 6-3 ” 复 选 框 属 性 面板 中 的 参数 名 称 及 功能 
























属 性 | 对 应 属性 面板 中 的 名 称 功 能 
name 复 选 框 名 称 指定 复 选 框 对 象 的 名 称 , 用 来 区 别 复 选 框 的 内 容 
value 选 定 值 当 用 户 选择 复 选 框 时 ,该 值 将 被 递交 到 服务 器 进行 参数 运算 
checked 初始 状态 当 浏览 器 载 人 表单 时 ,用 于 设置 复 选 框 是 否 被 预先 选中 
3. 添加 单 选 按钮 组 
Ln 单 选 按钮 对 象 用 于 设计 者 希望 访问 者 在 多 个 选项 中 只 能 选择 一 个 
上 汪汪。 选项 时 使 用 。 
es: 【案例 6-9】 添加 单 选 按钮 组 。 





@ 新 建 HTML 5 文档 ,并 在 其 中 创建 表单 域 ,将 光标 定位 在 表单 中 。 
@ 在 “搬入 ?面板 的 “表单 ”类别 中 单 击 “ 单 选 按钮 组 ?按钮 图 ,打开 * 单 选 按钮 组 ?对 话 


框 , 如 图 6-27 所 示 。 
@ 在 “名 称 ” 文 本 框 中 输入 单 选 按钮 组 的 名 称 。 单 击 团 按 钮 向 该 组 添加 一 个 单 选 按 
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名 称 : Radiocroup1 

















#4 国电 EE 
标签 值 
单 选 单 选 
单 选 单 选 














布局 ,使 用 :加 换行 符 ( <br> 标签 ) 
日 雪 格 








图 6-27 “ 单 选 按钮 组 ”对 话 框 


钮 , 单 击 向 上 或 向 下 箭头 按钮 对 这 些 单 选 按 钮 重新 进行 排序 。 根 据 需 要 选择 使 用 “换行 
符 " 或 “表格 " 单 选 按 钮 来 设置 之 前 创建 的 单 选 按 钮 组 的 布局 。 设 置 完成 后 , 单 击 “确定 ” 按 
钮 , 即 可 插入 一 组 单 选 按钮 ,如 图 6-28 所 示 。 选 择 单 选 按钮 组 中 的 某 个 单 选 按钮 ,可 以 发 
现 其 属性 面板 中 的 各 参数 与 其 他 表单 对 象 属性 雷同 ,这 里 不 再 过 多 解释 。 








图 6-28 插入 单 选 按钮 组 


4. 添加 列表 或 菜单 

列表 或 菜单 表单 对 象 能 够 显示 多 个 选项 ,用 户 可 以 在 滚动 列表 或 下 拉 菜单 中 进行 选 
择 , 在 滚动 列表 中 用 户 可 以 选择 多 个 选项 ,在 下 拉 莱 单 中 只 能 选择 一 个 选项 。 

【案例 6-10】 添加 列表 或 菜单 。 

QO@ 新建 HTML 5 文档 ,并 在 其 中 创建 表单 域 , 将 光标 定位 在 表单 中 。 

@ 在 “插入 ”面板 的 “表单 "类别 中 单 击 可 按钮 , 即 可 在 表单 域 中 插入 一 个 菜单 选项 。 

@ 选择 刚才 创建 的 表单 对 象 ,在 其 属性 面板 中 选择 “菜单 ”类 型 或 “列表 ”类 型 。 若 选 
择 “ 菜 单 ” 类 型 ,表单 在 浏览 器 中 将 只 有 一 个 选项 可 见 ; 若 选择 “列表 ”类 型 ,表单 在 浏览 器 
中 将 显示 一 组 可 选项 。 这 里 以 “菜单 ”类 型 为 例 进 行 讲解 。 

@ 将 该 表单 设置 为 “菜单 ”类 型 , 单 击 “ 列 表 值 ” 按 钮 。 这 时 打开 “列表 值 ” 对 话 框 ,如 
图 6-29 所 示 。 在 该 对 话 框 中 , 单 击 四 按 钮 可 以 增加 一 个 项 目标 签 , 单 击 器] 按钮 则 可 以 删 
除 一 个 项 目标 签 。 根 据 需要 为 每 个 菜单 项 设置 相应 的 值 。 

回 单 击 “ 确 定 ” 按 钮 ,返回 软件 主 界面 。 通 过 浏览 器 预览 后 的 效果 如 图 6-30 所 示 。 
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图 6-29 “列表 值 ”对 话 框 图 6-30 菜单 对 象 预览 效果 
































@ 将 该 表单 设置 为 “列表 ”类 型 ,此 时 “高 度 ”" 和 *“ 选 定 范围 "属性 处 于 可 编辑 状态 ,这 
里 将 高 度 设置 为 3, 并 选中 “允许 多 选 ”" 复 选 框 ,如 图 6-31 所 示 。 通 过 浏览 器 预览 后 的 效果 
如 图 6-32 所 示 。 


















































图 6-32 ”列表 对 象 预览 效果 


5. 添加 跳 转 菜单 

在 跳 转 菜单 中 选择 某 一 选项 ,可 以 链接 到 任何 指定 的 URL, 这 种 表 
单 通常 用 于 实现 导航 效果 。 

【案例 6-11】 添加 跳 转 菜 单 。 

@ 新 建 HTML 5 文档 ,并 在 其 中 创建 表单 域 , 将 光标 定位 在 表单 中 。 

@ 在 “插入 ”面板 的 “表单 ”类 别 中 单 击 “ 跳 转 菜 单 ” 按 钮 谓 , 打 开 “ 插 入 跳 转 菜单 ”对 
话 框 。 

@ 根据 需要 添加 跳 转 菜单 的 内 容 。 单 击 团 按 钮 增加 一 个 菜单 项 ,在 “文本 区域 输 入 
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跳 转 菜单 项 的 名 称 ,在 “选择 时 , 转 到 URL” 文 本 框 中 输入 跳 转 的 路 径 , 如 图 6-33 所 示 。 
其 他 选项 读者 可 根据 需要 自行 设置 。 

@ 单 击 “ 确 定 ” 按 钮 , 即 可 完成 跳 转 菜单 的 插入 。 通 过 预览 可 以 发 现 ,当选 择 跳 转 菜 
单 中 的 某 一 选项 后 , 便 会 打开 该 选项 对 应 的 网 站 ,如 图 6-34 所 示 。 


外 日 [EIS 


ttp: ff tnall. com]) 
http: /fr jd con/) 





























文本 :苏宁 易 购 
选择 时 ， 转 到 URL http://ww. suning. con/ 浏览 一 























打开 URL 于 : | 主 窗口 
检 单 1D: junpifenu 








选项 菜单 之 后 插入 前 往 按钮 











: 
更 改 URL 后 选择 第 一 个 项 目 天 狂 
图 6-33 “插入 跳 转 菜单 ”对 话 框 图 6-34” 跳 转 菜单 预览 效果 
6. 添加 按钮 


按钮 对 象 在 表单 中 必 不 可 少 ,该 对 象 可 以 将 表单 内 的 数据 提交 到 服务 器 中 ,或 者 重 置 
该 表单 。 默 认 情 况 下 ,按钮 外 观 一 般 不 能 满足 实际 需要 ,通常 需要 配合 CSS 对 按钮 进行 
美化 ,具体 内 容 后 续 章 节 将 陆续 讲解 ,这 里 仅 对 按钮 对 象 的 添加 进行 讲述 。 

【案例 6-12】 添加 按钮 。 

@ 新 建 HTML 5 文档 ,并 在 其 中 创建 表单 域 ,将 光标 定位 在 表单 中 。 

@ 在 “插入 ”面板 的 “表单 "类别 中 单 击 “ 按 钮 "按钮 , 即 可 插入 一 个 按钮 。 

@ 选择 刚 插入 的 按钮 ,在 其 属性 面板 中 根据 需要 选择 按钮 的 动作 ,如 图 6-35 所 示 。 
修改 “ 值 ?的 内 容 , 可 以 改变 按钮 上 面 显 示 的 文本 。 


和 uatitied-i (Cama)e 


</fnrm> 


[bodv> CEoragEoral > Capatgbattony 
























































图 6-35 ”添加 按钮 对 象 


在 属性 面板 中 ,动作 ?包含 3 种 。 选 择 “ 提 交 表 单 ” 时 , 单 击 按钮 后 ,表单 数据 将 被 提 
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交 到 指定 页 面 或 脚本 ;选择 “ 重 设 表单 ”时 , 单 击 按钮 后 ,将 清除 表单 中 的 内 容 ; 选 择 “ 无 ” 
时 , 单 击 按钮 后 ,无 任何 动作 。 

7. 表单 的 自动 验证 

在 HTML 5 中 ,通过 对 元 素 使 用 属性 的 方法 ,可 以 实现 表单 提交 时 自动 验证 的 功能 ， 
这 里 向 读者 介绍 required 属性 和 pattern 属性 。 

required 属性 可 以 被 使 用 在 大 多 数 的 元 素 上 (隐藏 元 素 、 图 片 元 素 除 外 )。 在 提交 时 ， 
如 果 该 元 素 内 容 为 空 , 则 不 允许 提交 。 

pattern 属性 适用 于 以 下 input 类 型 : text、search、url,telephone、email 和 password。 
该 属性 规定 了 用 于 验证 输入 字段 的 标准 ,开发 者 可 以 通过 正则 表达 式 完成 对 标准 的 
创建 。 

【案例 6-13】 表单 的 自动 验证 。 

Q@ 新 建 HTML 5 文档 ,在 其 中 创建 两 个 表单 域 , 并 在 其 中 插入 两 组 文本 域 和 提交 
按钮 。 

@ 插入 完成 后 ,分 别 为 input 元素 添加 required 属性 和 pattern 属性 ,具体 的 代码 如 
图 6-36 所 示 。 















~"" method="get" id="a"> 


name="a" id="a" type="text" required> 
<input name="a" id="a" type="submit" value=" 提 交 " 
</p> 
</form> 
<form action="" method="get" id="b"> 
<p> 输 入 : 





<input name="b" type="text" pattern="[A-z]{3}" 
placeholder=" 请 在 此 输入 3 个 字母 "> 
<input name="b" type="submit" value=" 提 交 "> 
</p> 
</form> 
</body> 


图 6-36 插入 required 属性 和 pattern 属性 


@ 保存 当前 网 页 文档 ,在 浏览 器 中 预览 时 ,在 违反 预 设 条 件 的 前 提 下 分 别 单 击 “ 提 
交 ” 按 钮 ,此 时 预 设 的 required 属性 和 pattern 属性 会 自动 判断 文本 域 中 的 值 是 否 符合 要 
求 ,并 显示 警告 文字 ,如 图 6-37 和 图 6-38 所 示 。 

















[| 


， [GE | 国 请 填写 此 字段 . 





























图 6-37 无 输入 内 容 时 提交 图 6-38 输入 格式 错误 时 提交 


第 6 章 表格 与 表单 


6.4 CSS 在 表单 中 的 应 用 


通过 Dreamweaver 软件 自动 创建 的 表单 ,外 观 风格 一 般 不 能 满足 工作 需要 。 因 此 ， 
本 节 主 要 向 读者 介绍 使 用 CSS 控制 表单 外 观 的 基本 方法 。 通 过 本 节 的 学 习 , 读 者 能 够 掌 
握 美化 表单 的 基本 思路 和 过 程 。 


6.4.1 文本 域 的 美化 


通过 CSS 样式 可 以 对 文本 域内 的 字体 、 颜 色 以 及 背景 图 像 加 以 控 
制 。 下 面 以 实例 的 形式 介绍 如 何 使 用 CSS 美化 文本 域 。 

【案例 6-14】 文本 域 的 美化 。 

@ 在 空白 的 HTML 5 文档 中 创建 表单 域 ,并 将 光标 定位 在 表单 中 。 

@ 在 “插入 "面板 的 “表单 ”类别 中 单 击 “ 文 本 字段 "按钮 ,创建 两 个 文本 框 ,并 将 该 文 
本 框 的 ID 属性 分 别 设置 为 textfield-1 和 textfield-2 ,此 时 效果 如 图 6-39 所 示 。 








名 为 "textfield-2" 的 文本 框 


< 








图 6-39 插入 两 个 文本 框 


@ 在 当前 页 面 顶部 head 区 域 的 内 部 ,插入 对 应 的 CSS 样式 规则 ,如 图 6-40 所 示 。 
保存 当前 页 面 ,通过 浏览 器 预览 后 的 效果 如 图 6-41 所 示 。 





TD CT EE 

rextfield-2 { 
width:; 150px;/* 设 置 文 本 域 宽度 */ 
height: 20px;/* 设 置 文本 域 高 度 */ 
line-height: 20px;/* 设 置 文本 域内 文字 行 高 ， 目 的 让 文字 秋 直 居中 */ 
color: #666;/* 设 置 文本 域内 文字 其 色 */ 
font-size: 14px;/* 设 置 字体 大 小 */ 
border: lpx solid #D4D4D4;/* 人 “/ 
background: url(6-14username bg. no-repeat left center; 
/* 为 有 下 证 j0 计 入 由 信 ， Er 时 让 交涉 
padding-left: 20px;/* 设 置 左边 距 ， 为 加 预 久 位 和 wh 





/style> 


图 6-40 针对 textfield-2 编写 CSS 规则 








需要 说 明 的 是 ,本 案例 中 使 用 ID 选择 符 对 具体 的 文本 域 进行 美化 ,而 在 实际 工作 中 
可 以 预先 编写 类 规则 ,然后 应 用 在 多 个 文本 域 中 ,这 样 工 作 效率 将 会 更 高 。 


6.4.2 CSS 3 按钮 


按钮 在 网 页 中 出 现 的 频率 较 多 ,在 实际 工作 中 有 多 种 方法 能 够 实现 ”3 
按钮 效果 : 一 是 使 用 a 元 素 ,再 配合 相应 的 CSS 规则 使 其 呈现 按钮 外 
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A 





站 文本 域 的 美化 
< 3 Cla 三 








1234567890 名 为 “textfield-1” 的 文本 框 


名 为 “textfield-2” 的 文本 框 


R 


图 6-41 美化 后 的 文本 域 预览 效果 


观 , 例 如 ,网 上 购物 中 “加 入 购物 车 ”按钮 ;二 是 使 用 button 元 素 创建 按钮 ;三 是 使 用 input 
元 素 的 button 类 型 创建 按钮 ,例如 ,用 户 注册 时 的 “立即 注册 ”按钮 。 

需要 说 明 的 是 ,button 元 素 与 一 input type 二 "button" 记 相 比 ,提供 了 更 为 强大 的 功 
能 和 更 丰富 的 内 容 。 壹 button 与 二 /button 过 标签 之 间 的 所 有 内 容 都 是 按钮 的 内 容 , 但 不 
同 的 浏览 器 会 提交 不 同 的 值 , 其 中 包括 任何 可 接受 的 正文 内 容 ,比如 文本 或 多 媒体 内 容 。 在 
需要 提交 用 户 表单 内 容 时 ,建议 读者 请 使 用 input 元 素 在 HTML 表单 中 创建 按钮 。 

【案例 6-15〗 CSS 3 按钮 。 

| 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 。 在 文档 中 创建 表单 域 ,并 将 光 
标定 位 在 表单 域 中 。 

@ 在 “插入 ”面板 的 “表单 "类别 中 单 击 “ 按 钮 ”按钮 ,创建 一 个 按钮 ,并 将 该 按钮 的 id 
属性 设置 为 mybutton,value 属性 设置 为 Down Load。 

@ 在 当前 页 面 顶部 head 区 域内 ,针对 mybutton 对 象 编写 CSS 规则 ,如 图 6-42 所 

。 保 存 当 前 页 面 , 当 鼠 标 悬 停 在 按钮 上 时 即 可 看 到 效果 ,如 图 6-43 所 示 。 


tyle EYPe=nEeXE75339y 
myburcon { 
fonc: 30px " 侈 软 雅 黑 ": 
rexr-ashadow:; ipx 1px 0 rgba(255,255,255,0.4);/* 设 置 字体 阴影 效果 */ 
cursor: pointer;/* 设 置 限 标 县 售 时 有 ~ 手 形 " 显 示 */ 
padding; 10px 20px; 
background-color: #48b5f2: 
background-repeat: no-repear: 
background-position: bottom left:/* Es 图 像 左 下 角 对 齐 */ 
background-image: url(6-15buccon_bg.pi 
background-clip: border-box;/® ee 区 红 向 让 坟 胃 及。 */ 
border-radius: spx;/* 贺 角 边 框 */ 
box-shadow: 0 0px 5px #fff insec;/* 设 置 按钮 高 光 效果 */ 
transition-property: background-posiciont/* 规 定 设置 过 省 效果 的 Css 属性 的 名 称 */ 
transition-duration: 15;/* 规 定 完成 过 滚 效果 需要 多 少 秒 */ 
border: 1px solid #84acc3;/* 设 置 按 相 边 杠 */ 
; 
#mybutton:hover ¢ 
background-position: top left; 
)/* 设 置 限 标 县 停 时 背景 图 像 定位 的 位 置 */ 


/style> 

















图 6-42 mybutton 对 象 的 CSS 规 则 








图 6-43 CSS 3 按钮 的 最 终 效 果 
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本 案例 中 利用 CSS 3 的 box-shadow .background-clip ,border-radius 和 transition 等 
属性 ,创建 了 一 个 具有 动感 的 按钮 ,而 在 实际 工作 中 ,可 根据 需要 进行 相关 设置 ,并 不 拘泥 
于 当前 制作 思路 。 


6.4.3 搜索 框 的 美化 


搜索 框 是 一 个 网 站 必 不 可 少 的 组 成 部 分 , 它 的 美观 程度 直接 决定 着 网 站 的 用 户 体验 。 
这 里 以 实例 的 形式 向 读者 介绍 搜索 框 的 美化 过 程 。 

【案例 6-16】 搜索 框 的 美化 。 

@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 ,在 文档 中 创建 名 为 search_box 
的 DIV 容器 ,并 在 容器 中 创建 表单 域 。 

@ 将 光标 定位 在 表单 域 中 ,在 “插入 "面板 的 “表单 "类别 中 单 击 “ 文 本 字段 "按钮 , 插 
入 一 个 单行 文本 框 。 在 文本 框 的 后 面 ,继续 插入 图 像 域 ,此 时 的 页 面 结 构 如 图 6-44 所 示 。 








" method="get"> 
textfield"></1label> 

"textfield" type="text" class="searchinput" id="textfield" value=" 请 输入 查找 关键 字 "/> 
"" type="image" src="6-16search go.gif" class="searchaction"> 





图 6-44 当前 页 面 结构 


@ 为 了 改变 表单 的 外 观 样 式 , 这 里 拟定 义 searchinput 和 searchaction 类 规则 ,分别 
作用 在 文本 框 和 图 像 域 上 ,使 其 改变 外 观 。 在 当前 页 面 顶 部 head 区 域内 ,编写 相关 CSS 
规则 ,如 图 6-45 所 示 。 

@ 保存 当前 页 面 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 6-46 所 示 。 


style type="text/css"> 
#search box 1 
border: #CCC 1px solid; 
height: 27px; 
width: 210px; 
) 
.searchinput { 
border: 0;/* 取 消 搜索 框 默 认 边框 样式 */| 
padding-left: 3px; 
width: 170px; 
height: 25px; 
line-height: 25px; 
float: left; 
color: #636365; 
font-size: 14px; 
) 
.searchaction { 六 搜索 框 的 美化 x 
float: left; 








人 
width; 21px; Sd < 
height: 17px; - 
margin-top: Spx; 请 输入 查找 关键 字 
margin-left: Spx; 

人 

/style> 














6-45 ”案例 6-16 的 CSS 规则 6-46 ”搜索 框 的 美化 预览 效果 
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6.5 ”过程 指 导 一 一 “Yuze App 注册 ”页 面 的 制作 


本 节 主 要 使 用 表单 对 象 创建 一 个 注册 页 面 所 需 的 基本 信息 ,再 结合 CSS 阴影 和 CSS 
圆 角 等 内 容 ,实现 对 表单 的 美化 。 通 过 本 节 的 学 习 , 读 者 能 够 掌握 表单 元 素 的 基本 使 用 方 
法 ,以 及 巩固 border-radius box-shadow 和 CSS 定位 的 相关 知识 。 
6.5.1 过 程 分 析 


通过 对 实际 任务 的 理解 ,本 节 需 要 完成 的 页 面 最 终 效 果 如 图 6-47 所 示 。 从 最 终 效 果 
来 看 ,整个 页 面 的 布局 较为 简单 ,通过 深思 熟 虑 ,页 面 布局 如 图 6-48 所 示 。 








Copyright 2014 李 至 瑟 暑 1ghts reserved 





图 6-47 “Yuze App 注册 ”页 面 最 终 效 果 


6.5.2 步骤 详解 


1. 前 期 准备 工作 

(1) 启动 Dreamweaver CS6, 创 建站 点 ,然后 将 新 建 的 HTML 5 空白 文档 保存 在 该 
站 点 中 ,并 命名 为 index. html。 

(2) 在 站 点 中 创建 images 和 style 两 个 文件 夹 . 分 别 存放 页 面 修饰 图 片 和 CSS 样式 
奖 件 。 

(3) 创建 一 个 外 部 CSS 样式 表 style. css, 将 其 与 index. html 文档 进行 链接 。 
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header 





container 








logo 























register-container 





iphone register 




















footer 


图 6-48 布局 示意 图 


2. 页 面 初始 化 与 头 部 区 域 的 制作 

(1) 在 代码 视图 中 ,使 用 手动 输入 的 方式 根据 布局 示意 图 创建 戏 套 的 相关 容器 ,此 时 
的 页 面 结构 如 图 6-49 所 示 。 

(2) 切换 到 style. css 文件 中 ,创建 初始 化 规则 和 对 应 容器 的 CSS 规则 ,如 图 6-50 和 
图 6-51 所 示 。 


ody 
background: #f8f8f8; 
text-align: left; 
font-family: "微软 雅思 "; 


color: #555; 
header class="header"> font-size: 16px; 
<div class="container"> font-weight: 400; 
<div class="logo"> 
<hl><a href="">Yuze App 注册 </a></h1>| 
</div> text-decoration: none; 











</div> color: #555; 
</header> ) 
图 6-49 页面 头 部 区 域 的 页 面 结构 6-50 页 面 初始 化 规则 


(3) 保存 当前 页 面 ,通过 浏览 器 预览 后 的 效果 ,如 图 6-52 所 示 。 

3. 注册 区 域 的 制作 

(1) 在 二 header class 一 "header" 二 一 /header 二 标签 的 后 面 ,创建 用 于 盛 放 注 册 区 域 
所 有 元 素 的 容器 ,具体 的 页 面 结构 如 图 6-53 所 示 。 

(2) 在 二 div class 一 "iphone" 盖 一 /div 二 标签 内 部 ,插入 预先 准备 好 的 手机 图 像 。 然 
后 切换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 6-54 所 示 。 

(3) 在 二 div class 一 "register" 二 二 /div 二 标签 内 部 ,使 用 多 个 表单 元 素 创 建 注 册 时 所 
需 的 基本 对 象 ,具体 的 页 面 结构 如 图 6-55 所 示 。 

(4) 在 实际 工作 中 ,要 想 制作 出 精美 的 表单 效果 就 需要 逐个 对 不 同 的 表单 类 型 编写 
CSS 规 则 ,切换 到 style. css 文件 中 ,具体 规则 如 图 6-56 和 图 6-57 所 示 。 


~、 
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-header 1 


margin: 0 auto; 
Padding-bottom: Spx; 
background: #f8f8f8 url(../images/pattern.jpg) left top repeat; 
border-top: 4px solid #eb4141; 
-moz-box-shadow: 0 ipx Spx 0 rgba(0,0,0,.8); 
-webkit-box-shadow: 0 ipx Spx 0 rgba(0,0,0,.8); 
box-shadow: 0 1px 5px 0 rgba(0,0,0, .8) :/* 设 置 容器 的 阴影 效果 ， 并 
且 指 定 阴影 的 颜色 和 适 明 度 */ 
} 
‘container { 
width: 940px; 
margin-right: auro; 
margin-left: auto; 





} 


.Container:before, .container:afrer 1 





line-height: 

; 

‘container:after { 
clear: borh; 


}/* 使 用 伪 类 的 方式 青 除 浮动 */ 
.logo {width: 400px;) 
‘logo hl { 


Padding-left: S50px; 
font-family: "微软 雅 
font-size: 36px; 
font-weight: 400; 














图 6-51 页 面 头 部 相关 容器 CSS 规则 





图 6-52 页 面 头 部 预览 效果 


这 里 对 该 容器 同时 应 用 两 个 类 规则 -register-container 1 
人 margin-top: 50px; 


} 
iphone { 
text-align; right; 





Kheader class="header"> 


a el / 











</header> / float: left; 
|<div class="register-cortainer container">| 》 

<div class="iphone"></div> ,iphone img { 

xdiv class="register"></div> margin-right: 10px; 
/aiv> 





6-53 注册 区 域 的 页 面 结构 图 6-54 手机 图 像 的 CSS 规则 





<div class="register™> 
<form action="" method="post"> 
<h2>Yuze App 注 册 </h2> 
<label for="username"> 用 户 名 </1abel> 
<inpuc type="text" id="username" name="usertname" placeholder=" 请 在 这 里 输入 用 户 名 "> 
<label for="tel"> 手 机 号 码 </label> 
<input type="text" id="tel" name="tel" placeholder=" 请 在 这 里 输入 手机 号 码 "> 
<label for="email"> 邮 箱 地 址 </1abe1> 
<input type="text” id-"email" name-"email" placeholder=" 请 在 这 里 输入 邮箱 地 址 "> 
<label for-"password"> 密 码 </label> 
<input type="text" id="password” name="password” placeholder=" 请 在 这 里 输入 登录 密码 "> 
”passwordagain"> 确 认 密码 </1abe1> 
<input type="password" id="passwordagain" name="passwordagain" placeholder=" 请 再 次 输入 登录 密码 ">| 
<button type="submit"> 注 册 </button> 
</form> 
</div> 

















<label for 














6-55 ”使 用 多 个 表单 元 素 创建 注册 时 所 需 的 基本 对 象 
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register T 
float: left; 
padding-top: 100px; 
width: 460px; 
} 
“register form { 
padding: 20px 50px 40px S50px; 
background: #f8f8f8 url(../images/pattern.jpg) 
left top repeat; 
-moz-border-radius: Spx; 
-webkic-border-radius: 8px; 
border-radius: 8px; 
-moz-box-shadow: 0 1ipx Spx 0 rgba(0,0,0,.3); 
-webkit-box-shadow: 0 ipx Spx 0 rgba(0,0,0,.3); 
box-shadow: 0 ipx Spx 0 rgba(0,0,0,.3); 
} 
.register form h2 { 
margin-bottom: 25px; 
padding-bottom: 15px: 
background: url(../images/pencil.png) 35px 6px 
Ino-repeat: 
border-bottom: 2px dotted #bbb; 
font-size: 30px; 
font-weight: 400; 
text-align: center; 








图 6-56 ”表单 CSS 规则 (1) 





register form inpuc 1 
width: 95%; 
height: 30px; 
background: #fcfcfc; 
border: 1px solid #ddd; 
-moz-border-radius: 2px; 
-webkit-border-radius: 2px; 
border-radius: 2px; 
-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.1) inset; 
-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.1) inse 
box-shadow: 0 1px 3px 0 rgba(0,0,0, .1) inset; 
color: #888; 
font-size: 16px 
display: block; 











) 

.register form label { 
margin: 7px 0 10px Spx; 
font-size: 16px; 





,register form button { 
display: block; 
cursor: pointer; 
width: 95%; 
height: 42px; 
margin-top: 25px; 
padding: 0; 
background: #eb4141; 
-moz-border-radius: 3px; 
webkit-border-radius: 3px; 
border-radius: 3px; 





0 15px 30px 0 rgba(255,255,255, .1) inset; 
-webkit-box-shadow: 0 15px 30px 0 rgba(255,255,255, .1) inset; 
box-shadow: 0 15px 30px 0 rgba(255,255,255, .1) inset; 
font-size: 16px; 
font-family: "微软 雅 黑 
color: #fff; 











图 6-57 ”表单 CSS 规则 (2) 


在 上 述 的 规则 中 ,大 部 分 规则 用 于 实现 圆 角 边框 和 阴影 效果 。 另 外 ,在 样式 代码 属性 
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方面 ,由 于 多 种 浏览 器 使 用 的 内 核 不 同 ,需要 针对 不 同 的 内 核 单 独 编写 , 例如 , box- 
shadow( 针 对 Internet Explorer 浏览 器 )、 -webkitbox-shadow( 针 对 Chrome 浏览 器 ) 和 
-moz-box-shadow( 针 对 Firefox 浏览 器 ) 规 则 ,其 本 质 是 一 条 规则 。 

(5) 保存 当前 页 面 ,通过 浏览 器 预览 即 可 看 到 效果 。 

4. footer 区 域 的 制作 

(1) 在 二 div class 二 "register-container container" 二 一 /div 二 标签 的 后 面 , 使 用 
footer 元 素 创 建 版 权 区 域 的 内 容 ,具体 结构 如 图 6-58 所 示 。 


header class="header™S 


</header> 


div class="register-container container"> 
<div ec 
|</aiv> 

kfoorer id="footer">Copyright 5copy; 2015 宇 泽 互 联 rights reserved.</foorer 


6-58 ”版 权 区 域 页 面 结构 

















(2) 切换 到 style. css 文件 中 ,创建 “并 footer {text-align: center; } ”CSS 规则 ,保存 当 
前 页 面 ,通过 浏览 器 预览 即 可 看 到 最 终 效 果 。 

至 此 ,“Yuze App 注册 页 面 ”的 制作 到 此 结束 ,读者 可 以 根据 自己 的 需要 修改 相关 
CSS 的 内 容 , 让 页 面 变 得 更 加 漂亮 。 


6.6 ”自主 任务 一 一 “网 站 后 台 登 录 ” 页 面 的 制作 


结合 本 章 所 讲 的 知识 ,完成 “网 站 后 台 登 录 ” 页 面 的 制作 ,请 读者 在 制作 过 程 中 着 重 体 
会 CSS 控制 表单 对 象 的 方法 和 思路 。 页 面 最 终 效果 和 布局 如 图 6-59 与 图 6-60 所 示 。 





图 6-59 “网 站 后 台 登 录 ” 页 面 的 最 终 效果 


6.7 


ID- 
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header 








bannerwrap 





banner 





login-aside 














footer 


图 6-60 “网 站 后 台 登 录 ” 页 面 布局 示意 图 


习题 


. 表格 的 作用 是 什么 ? 
. 在 CSS 中 border-collapse 属性 的 作用 是 什么 ? 

.使 用 伪 类 选择 器 制作 一 组 10 行 6 列 隔行 变色 的 表格 。 
. 表单 的 作用 是 什么 ? 常见 的 表单 对 象 有 哪些 ? 

. 在 HTML 5 中 哪 两 种 属性 能 够 实现 表单 的 自动 验证 ? 
.如 何 创 建 复 选 框 和 单 选 按 钮 ? 

. 按照 图 6-61 所 示 的 页 面 效果 制作 登录 框 。 








6-61 习题 7 页 面 效 果 
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【本 章 导读 】 

框架 为 开发 者 提供 一 个 将 浏览 器 窗口 划分 多 个 区 域 的 方法 ;模板 的 灵活 运用 能 够 帮 
助 开发 者 快速 地 创建 布局 结构 类 似 的 页 面 ;CSS 布局 的 相关 知识 能 够 创建 适合 多 种 设备 
(台式 机 ,平板 电脑 和 智能 手机 等 ) 的 网 页 。 本 章 主要 围绕 框架 、 模 板 与 CSS 布局 3 个 方 
面 的 内 容 , 着 重 讲解 它们 在 Dreamweaver 中 的 操作 方法 。 

【学 习 目 标 】 

名 了解 框架 的 基本 概念 ,能 够 使 用 框架 创建 简单 网 页 ; 

名 掌握 将 某 个 页 面 保存 为 模板 的 方法 ,并 能 够 通过 模板 快速 创建 多 个 页 面 ; 

名 掌握 CSS 弹性 盒 布 局 的 相关 知识 ; 

2? 能够 灵活 使 用 @media query 创建 出 适合 多 种 设备 显示 的 页 面 。 


HTML 5 已 经 握 弃 了 HTML 框架。 最初, HTML 框架 提供 了 在 
浏览 器 窗口 中 显示 多 个 网 页 的 方式 .但 从 目前 的 发 展 来 看 ,框架 往往 意 
味 着 非常 严重 的 可 访问 性 问题 , 它 难以 适应 搜索 引擎 和 移动 设备 。 因 此 本 节 仅 向 读者 介 
绍 HTML 5 中 框架 知识 保留 的 内 容 。 


7.1.1 基本 概念 


1. frame 元 素 

框架 (Frame) 是 浏览 器 窗口 中 的 一 个 区 域 ,包含 在 框架 集中 , 它 是 框架 集 的 一 部 分 ， 
每 个 框架 中 放置 一 个 网 页 内 容 , 组 合 起 来 就 是 浏览 者 看 到 的 框架 式 网 页 。 

2. iframe 元 素 

iframe 元 素 会 创建 包含 男 一 个 文档 的 内 联 框架 。 虽 然 HTML 5 据 弃 了 框架 ,但 并 不 
意味 着 对 框架 不 支持 。 之 所 以 iframe 元 素 能 被 HTML 5 保留 ,主要 原因 是 Web 应 用 经 
常 要 利用 二 iframe 二 实现 一 些 集成 任务 ,例如 在 网 页 中 包含 搜索 框 和 广告 等 。 


3. frameset 元 素 
框架 集 (Frameset) 实 际 是 一 个 网 页 文件 ,用 于 定义 文档 中 框架 的 布局 和 属性 ,包括 框 
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架 的 数目 .框架 的 大 小 和 位 置 以 及 在 每 个 框架 中 显示 的 页 面 的 URL。 


4. 框架 与 框架 集 的 关系 

当 设 计 人 员 准 备 使 用 多 个 框架 制作 一 个 网 页 时 ,框架 集 文档 就 是 生成 框架 本 身 的 文 
档 。 框 架 集 本 身 不 包含 要 在 浏览 器 中 显示 的 内 容 , 只 是 向 浏览 器 提供 应 该 如 何 显示 一 组 
框架 ,以 及 在 这 些 框架 中 应 显示 哪些 文档 的 有 关 信 息 。 例 如 , 某 个 页 面 被 创建 为 两 个 杠 
架 , 那 么 它 实际 包含 3 个 文件 : 一 个 框架 集 文件 ,两 个 框架 内 容 文件 。 


7.1.2 使 用 iframe 元 素 创 建 框架 页 面 


iframe 提供 了 一 个 简单 的 方式 把 一 个 网 站 的 内 容 嵌 入 另 一 个 网 站 ,但 笔者 仍然 建议 
读者 谨慎 使 用 iframe 元 素 。 究 其 原因 , 当 页 面包 含 框架 元 素 后 ,iframe 在 加 载 资源 时 可 
能 用 光 所 有 的 可 用 连接 ,从 而 阻塞 主页 面 资 源 的 加 载 速度 ,给 用 户 的 感觉 就 是 网 页 非常 
慢 , 从 而 降低 用 户 的 浏览 体验 。 

iframe 元 素 的 语法 如 下 。 


<iframe src= "URL" width= "x" height= "x" scrolling="[OPTION]" frameborder="x">< /iframe> 


参数 说 明 如 下 。 

src: 文件 的 路 径 , 既 可 以 是 HTML 文件 ,也 可 以 是 文本 。 

width、height: 设置 子 页 面 在 父 页 面 显示 时 的 大 小 。 

scrolling: 当 SRC 指定 的 HTML 文件 在 指定 的 区 域 显 示 不 完 时 ,设置 滚动 选项 ,如 
果 设 置 为 No, 则 不 出 现 滚动 条 ;如 果 设 置 为 Auto, 则 自动 出 现 滚动 条 ;如 果 设 置 为 Yes， 
则 显示 滚动 条 。 

frameborder: 区 域 边 框 的 宽度 , 取 值 为 0 时 ,不 显示 边框 。 

【案例 7-1】 使 用 iframe 元 素 创建 框架 页 面 。 

OO 启动 Dreamweaver CS6, 新 建 空白 HTML 5 文档 ,并 在 其 中 插入 简单 代码 ,如 
图 7-1 所 示 , 将 该 页 面 保存 为 “7-1 iframe 元 素 ( 子 页 面 ). html”。 

@ 再 次 新 建 空白 HTML 5 文档 ,使 用 二 iframe 二 标签 将 刚才 保存 的 页 面 通 入 当前 页 
面 中 ,其 页 面 结构 如 图 7-2 所 示 。 

@ 将 包含 iframe 元 素 的 页 面 保 存 为 “7-1 iframe 元 素 ( 父 页 面 ). html”, 通 过 浏览 器 预 
览 即 可 看 到 效果 ,如 图 7-3 所 示 。 


sayy 
<hi id="my">hello, 我 是 子 页 面 </h1>| 
</body> 


图 7-1 子 页 面 结构 





<body> 
<iframe src="7-1 iframe 元 素 ( 子 页 面 ) .html" id="test" width= 
"200" height="200" scrolling="no" frameborder="1"></iframe>| 
</body> 














图 7-2 父 页 面 结 构 图 7-3 包含 框架 页 面 的 预览 效果 
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假如 网 站 中 包含 许多 风格 ,布局 类 似 的 页 面 ,对 于 这 类 页 面 如 果 每 
个 页 面 都 逐个 制作 ,不 但 浪费 资源 而 且 效率 十 分 低 。 为 了 提高 网 站 建设 
的 效率 ,避免 重复 操作 ,利用 Dreamweaver CS6 中 的 模板 功能 可 以 有 效 解 决 此 类 问题 。 


7.2.1 模板 是 什么 


模板 是 一 种 预先 设计 好 的 网 页 样式 ,在 制作 布局 类 似 的 页 面 时 ,只 需 套 用 这 种 模板 就 
可 以 快速 创建 另 一 个 页 面 。 

1. 模板 的 区 域 

在 模板 中 有 两 种 区 域 , 一 种 是 锁定 区 域 , 另 一 种 是 可 编辑 区 域 ,创建 模板 的 过 程 就 是 
指定 和 命名 可 编辑 区 域 的 过 程 。 在 编辑 模板 时 ,设计 者 可 以 修改 模板 的 任何 编辑 区 域 和 
锁定 区 域 ,而 当 设计 者 基于 模板 创建 男 外 的 网 页 时 ,只 能 修改 那些 标记 为 可 编辑 的 区 域 ， 
网 页 中 那些 被 锁定 的 区 域 是 不 可 改变 的 。 

2. 模板 的 作用 范围 

从 模板 创建 的 文档 与 该 模板 保持 链接 状态 ,因此 , 当 模 板 被 用 户 修改 时 ,所 有 使 用 这 
种 模板 的 网 页 都 将 随 之 改变 ,除非 将 这 个 网 页 与 模板 进行 分 离 。 

3. 创建 模板 的 途径 

(1) 从 空白 文档 中 创建 模板 。 使 用 Dreamweaver 可 以 直接 创建 模板 。 在 菜单 栏 中 执 
行 “文件 ”>“ 新 建 " 命 令 , 打 开 “ 新 建文 档 ” 对 话 框 。 在 该 对 话 框 左 侧 ,选择 “ 空 模板 ”选项 
卡 , 并 在 “模板 类 型 "列表 中 选择 需要 的 模板 即 可 。 

(2) 从 现 有 文档 中 创建 模板 。 从 现 有 文档 中 创建 模板 是 实际 工作 中 经 常 使 用 的 处 理 
方法 ,图 7-4 所 示 的 是 某 个 网 站 的 子 页 面 ,而 图 7-5 所 示 的 页 面 是 以 图 7-4 所 示 页 面 为 模 
板 创 建 的 。 

从 上 述 两 幅 图 可 以 看 出 ,使 用 模板 创建 的 页 面 ,不 但 网 页 风格 相同 ,而 且 某 些 局 部 内 
容 (例如 ,页 面 头 部 导航 、 页 面 版 权 区 域 ) 也 完全 相同 ,这 样 不 仅 避 免 了 重复 设计 的 麻烦 ,而 
且 提 高 了 网 页 制作 的 效率 。 


7.2.2 使 用 模板 快速 创建 页 面 


下 面 以 制作 实例 的 形式 讲解 模板 从 创建 到 应 用 的 一 系列 工作 流程 ,请 读者 注意 学 习 
创建 模板 可 编辑 区 域 的 方法 ,以 及 依托 该 模板 创建 另 一 页 面 的 操作 。 

【案例 7-2】 使 用 模板 快速 创建 页 面 。 

使 用 模板 快速 创建 页 面 大 致 分 为 4 个 阶段 , 即 前 期 准备 阶段 .基于 现 有 文档 创建 模板 
阶段 、 创 建 可 编辑 区 域 阶段 和 基于 模板 创建 新 页 面 阶段 。 为 了 更 好 地 体会 整个 过 程 ,这 里 
不 再 对 网 页 具体 的 制作 过 程 进行 讲述 。 
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图 7-5 基于 模板 创建 的 页 面 
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1) 前 期 准备 阶段 

(1) 启动 Dreamweaver CS6 ,创建 新 站 点 ,并 在 其 中 建立 存放 图 像 的 images 文件 夹 ， 
以 及 存放 CSS 样式 文件 的 style 文件 夹 。 

(2) 新 建 HTML 5 文档 ,创建 一 个 拟 作为 模板 的 页 面 page. html, 如 图 7-4 所 示 。 

2) 基于 现 有 文档 创建 模板 阶段 EN 

(1) 打开 page. html 页 面 ,执行 菜单 栏 中 
的 “文件 ”>“ 另 存 为 模板 ”命令 ,打开 “另存 模 
板 ” 对 话 框 。 

(2) 在 对 话 框 中 的 “站 点 "下 拉 列 表 框 中 
选择 站 点 ,在 “另存 为 "文本 框 中 输入 模板 名 称 
muban, 如 图 7-6 所 示 。 单 击 “ 保 存 ” 按 钮 , 即 
可 将 当前 页 面 保存 为 用 于 创建 其 他 页 面 的 图 7-6 “另存 模板 ”对 话 框 
模板 。 

此 时 ,系统 自动 在 站 点 根 文件 夹 下 创建 一 个 名 为 Templates 的 文件 夹 , 并 将 创建 的 模 
板 文件 (扩展 名 为 . dwt)muban. dwt 保存 在 该 文件 夹 下 ,如 图 7-7 所 示 。 

3) 创建 可 编辑 区 域 阶 段 

(1) 当 模 板 创 建成 功 后 ,即刻 进入 模板 编辑 状态 , 即 编辑 的 是 muban. dwt 文档 。 在 
该 文档 中 ,选择 名 为 left_side 的 左 侧 导 航 栏 。 

(2) 执行 菜单 栏 中 的 “插入 ”模板 对 象 "一 “可 编辑 区 域 " 命 令 ,打开 “新建 可 编辑 区 
域 " 对 话 框 ,如 图 7-8 所 示 。 在 该 对 话 框 的 名称” 文本 框 中 输入 可 编辑 区 域 的 名 称 left_ 
side_nav, 单 击 “ 确 定 ” 按 钮 ,模板 中 就 建立 了 一 个 可 编辑 区 域 。 
































文件 


局 使 用 模 析 快速 创建 页 面 “| [本 地 视图 =] 
RGISHY 名 加 | 加 
,| 





名 称 : left_side_nav 
此 区 域 将 可 以 在 基于 该 模板 的 文档 
中 进行 编辑 。 























图 7-7 模板 存放 的 位 置 图 7-8 “新 建 可 编辑 区 域 " 对 话 框 


(3) 使 用 同样 的 处 理 方法 ,选择 页 面 主 内 容 区 域名 为 content_content 的 DIV 容器 ， 
为 该 区 域 定义 可 编辑 区 域 ,定义 完成 后 的 页 面 效 果 如 图 7-9 所 示 。 

仔细 观察 可 以 发 现 ,图 中 可 编辑 区 域 左 上 角 均 有 淡 蓝 色 底 纹 的 标签 加 以 显示 。 如 果 
想 要 删除 某 个 可 编辑 区 域 , 只 须 在 选中 该 区 域 的 情况 下 执行 菜单 栏 中 的 “模板 ”> 删除 模 
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图 7-9 创建 模板 的 可 编辑 区 域 
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板 标记 ”命令 即 可 。 

4) 基于 模板 创建 新 页 面 阶段 

之 前 的 步 又 已 经 完整 地 创建 了 一 个 页 面 模板 ,如 何 使 用 该 模板 快速 地 创建 其 他 网 页 
呢 ? 具 体操 作 步 又 如 下 。 

(1) 在 Dreamweaver CS6 菜单 栏 中 执行 “文件 ”一 “新 建 " 命 令 , 打 开 * 新 建文 档 ” 对 话 
框 ,选择 “空白 页 ”选项 卡 , 将 文档 类 型 设置 为 HTML 5, 然 后 选择 “模板 中 的 页 ”选项 卡 ， 
在 “站 点 ”列表 中 选择 当前 站 点 下 的 模板 文件 muban, 如 图 7-10 所 示 。 单 击 * 创 建 按 钮 ， 
即 可 基于 模板 创建 一 个 新 页 面 。 
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7-10 ”基于 模板 新 建 网 页 


(2) 通过 仔细 观察 可 以 发 现 , 在 新 建 的 页 面 右 上 角 有 “模板 : muban” 文 字 标 签 ,这 表 
示 当 前 文档 是 基于 模板 muban 而 建立 的 。 
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(3) 将 光标 移 至 页 面 其 他 区 域 ,光标 将 变 成 形状 ,表示 该 区 域 不 可 编辑 ;将 光标 移 
至 之 前 定义 的 可 编辑 区 域 . 则 可 以 修改 其 中 的 内 容 。 

(4) 在 标 有 left_side 和 content_content 名 称 的 区 域内 快速 修改 内 容 , 即 可 完成 另 一 
个 页 面 的 制作 ,如 图 7-11 所 示 。 需 要 注意 的 是 ,不 要 将 模板 文件 移动 到 Templates 文件 
夹 之 外 或 者 将 任何 非 模板 文件 放 在 Templates 文件 夹 中 。 
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图 7-11 基于 muban 模板 而 创建 的 页 面 


7.2.3 模板 的 修改 


模板 创建 完成 后 ,可 以 根据 具体 情况 随时 修改 模板 的 样式 和 内 容 。 当 修改 模板 并 保 
存 后 ,Dreamweaver CS6 会 对 应 用 模板 的 所 有 网 页 进行 更 新 。 


1. 更 新 基于 模板 的 文档 

修改 模板 后 ,Dreamweaver 会 提示 用 户 更 新 基于 该 模板 的 文档 。 可 以 使 用 以 下 方法 
来 更 新 文档 。 

(1) 在 文档 编辑 窗口 中 执行 “修改 ”一 "模板 ”一 “更 新 页 面 > 命 令 , 打 开 * 更 新 页 
面 ?对话 框 ,如 图 7-12 所 示 。 根 据 需 要 选 ee 还 是 只 更 新 特定 模 
板 的 页 面 。 

(2) 在 “文件 ”面板 的 “资源 ”选项 卡 中 单 击 左 侧 分 类 中 的 “模板 ”按钮 ,打开 “模板 ” 面 
板 。 在 模板 上 右 击 ,在 弹出 的 右键 菜单 中 选择 “更 新 站 点 ”选项 ,如 图 7-13 所 示 。 在 打开 
的 “更 新 页 面 ? 对 话 框 内 根据 需要 进行 设置 即 可 。 


第 7 章 框架、 模板 与 CSS 3 新 增 布局 


DGiANT 日 


EB] 
可 
看 
A 
四 
® 
mn 








查看 中 [ 洲 个 站 点 | > ] [使 用 模板 快速 创建 交 = 
更 新 : 回 库 项 目 
团 模板 吕 























回 显 示 记录 「 
状态 : 





图 7-12 “更 新 页 面 " 对 话 框 图 7-13 利用 “资源 ”选项 卡 更 新 站 点 


2. 从 模板 中 分 离 页 面 

“从 模板 中 分 离 页 面 "功能 可 将 当前 文档 从 模板 中 分 离 ,分 离 后 模板 中 的 文档 依然 存 
在 ,只 是 原来 不 可 编辑 的 区 域 变 得 可 以 编辑 ,这 给 修改 网 页 带 来 很 大 的 方便 。 打 开 一 个 基 
于 模板 创建 的 文档 ,执行 菜单 栏 中 的 "修改 "一 "模板 ”~ 从 模板 中 分 离 "命令 , 即 可 将 当前 
文档 从 模板 中 分 离 。 


7.3 CSS 3 多 列 布局 





页 面 布局 是 指 将 页 面 中 的 导航 栏 ` 板 块 内 容 和 表单 等 构成 要 素 进 行 回 
统筹 安排 。 在 实际 工作 中 ,要 实现 类 似 杂 志 版 面 中 的 多 列 布局 ,在 CSS 
2. 1 之 前 的 版 本 中 通常 使 用 浮动 和 定位 两 种 办 法 来 解决 。 使 用 浮动 处 理 布局 时 ,虽然 使 
用 较为 灵活 ,但 是 容易 发 生 错位 现象 ,而 且 需 要 编写 大 量 附 加 代码 ;使 用 定位 处 理 布 局 时 ， 
虽然 可 以 实现 精确 定位 ,但 是 这 种 布局 形式 不 具有 自 适应 能 力 , 各 个 板块 之 间 缺 乏 联动 。 
为 了 解决 上 述 困 难 ,CSS 3 新 增 了 多 列 自动 布局 功能 ,利用 该 功能 可 以 自动 将 内 容 划 
分 为 指定 的 列 数 进行 排列 。 本 节 将 详细 讲解 多 列 布局 的 基本 属性 和 使 用 方法 。 


7.3.1 使 用 columns 属性 创建 多 列 布局 


在 CSS 3 中 columns 属性 是 多 列 布局 的 基本 属性 ,该 属性 可 以 同时 定义 列 数 和 每 列 
的 宽度 。 

【案例 7-3】 使 用 columns 属性 创建 多 列 布局 。 

@ 新 建 HTML 5 文档 ,在 其 中 使 用 article 元 素 .hl 元 素 、h2 元 素 和 op 元素 创建 相关 
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结构 ,使 之 能 够 表现 一 篇 散文 的 结构 ,具体 结构 代码 如 图 7-14 所 示 。 

@ 在 当前 页 面 的 head 区 域 ,创建 对 应 的 CSS 规则 ,具体 代码 如 图 7-15 所 示 。 需 要 
提醒 读者 的 是 ,Internet Explorer 不 支持 columns 属性 。CSS 代码 中 在 某 个 属性 前 添加 
-webkit 前 级 ,其 目的 是 处 理 不 同 浏览 器 之 间 的 兼容 问题 ,这 里 的 -webkit-columns 是 
Chrome 浏览 器 的 私有 属性 。 





style type="text/css"> 
article { 
-webkit-columns: 200px 3; 
columns: 200px 3; 
}/* 设 置 网 页 文档 分 3 栏 显示 ， 每 栏 宽度 为 200px*/ 
hi < 
background: #6CF; 
padding: Spx; 
text-align: center; 


font-size: 16px; 
text-align: center; 


} 
Pp {text-indent: 2em;} 
/style> 











7-14 案例 7-3 的 页 面 结构 图 7-15 包含 columns 属性 的 CSS 规则 
G 保存 当前 网 页 文档 ,通过 浏览 器 预览 效果 ,如 图 7-16 所 示 。 
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图 7-16 多 列 布局 预览 效果 


7.3.2 多 列 布局 的 相关 属性 


1. column-width 


column-width 属性 用 于 定义 指定 对 象 单列 显示 的 宽度 ,不 可 以 取 负 值 。 


2. column-count 


column-count 属性 用 于 定义 指定 对 象 显示 的 列 数 , 取 值 为 大 于 0 的 整数 。 


3. column-gap 


column-gap 属性 用 于 定义 列 与 列 之 间 的 宽度 ,不 可 以 取 负 值 。 


4. column-rule 


column-rule 属性 用 于 定义 每 列 之 间 边框 的 宽度 ,样式 和 颜色 。 
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5. column-span 

column-span 属性 用 于 定义 元 素 的 跨 列 显示 。 取 值 为 1 时 , 仅 在 当前 栏 中 显示 ; 取 值 
为 all 时 ,将 横 跨 所 有 栏 进行 显示 。 

【案例 7-4】 多 列 布局 的 相关 属性 。 

Q@ 使 用 案例 7-3 中 的 页 面 结构 , 进 一 步 对 CSS 规则 进行 修改 。 具 体 修 改 的 内 容 如 
图 7-17 所 示 。 





[style type="text/css"> 
article { 
-webkit-column-width: 150px;/* 设 置 每 列 宽度 */ 
-webkit-column-count: 4;/* 设 置 列 数 */ 
-webkit-column-gap: 3em;/* 设 置 列 与 列 之 间距 离 */ 
-webkit-column-rule: 1px #F63 dashed;/* 设 置 列 与 列 之 间 的 样式 */ 
} 
hi < 
background: #6CF; 
padding: Spx; 
text-align: center; 
-webkit-column-span: al1;/* 设 置 标题 跨行 显示 */ 
} 
ha < 
font-size: 16px; 
text-align: center; 
-webkic-column-span: all;/* 设 置 标题 跨行 显示 */ 
;} 
pit 
text-indent: 2em; 
) 
/style> 








图 7-17 多 列 布局 的 相关 CSS 规则 


@ 保存 当前 网 页 文档 ,通过 浏览 器 预览 效果 ,如 图 7-18 所 示 。 
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图 7-18 多 列 布局 的 相关 属性 预览 效果 
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天 


> 


和 7.4 Css 3 弹性 盒 布局 


在 CSS 3 中 新 增 了 box 属性 ,通过 该 属性 可 以 实现 弹性 盒 布局 , 开 
发 者 可 以 轻松 创建 自 适应 浏览 器 窗口 的 弹性 布局 。 
7.4.1 使 用 盒 布局 


为 了 适应 弹性 盒 布 局 的 需要 ,CSS 3 新 增 了 与 box 相关 的 多 个 属性 ,借助 这 些 属 性 可 
以 方便 地 控制 页 面 布局 ,具体 属性 如 表 7-1 所 示 。 


表 7-1 CSS 3 中 新 增 的 与 盒 布局 相关 的 属性 































属 性 解 释 
box-align 定义 使 用 该 元 素 中 的 文字 、 图 像 或 子 元 素 水 平方 向 或 垂直 方向 的 对 齐 方式 
box-flex 定义 元 素 在 盒子 内 的 自 适应 尺寸 
box-ordinal-group 定义 元 素 的 显示 顺序 
box-orient 定义 元 素 的 排列 方式 
box-lines 定义 元 素 分 列 显 示 
box-pack 定义 元 素 在 水 平 框 中 的 水 平 位 置 ,以 及 垂直 框 中 的 垂直 位 置 





需要 特别 说 明 的 是 ,要 使 用 弹性 盒 布局 ,用 户 需 要 将 对 象 设置 为 盒子 显示 ,即将 对 象 
的 display 属性 值 设 置 为 bbx。 此 外 ,为 了 兼容 Firefox、Safari 和 Chrome 浏览 器 ,开发 者 
可 以 使 用 "display: -moz-box;” 和 “display: -webkitrbox;” 私 有 属性 进行 声明 。 

【案例 7-5】 使 用 盒 布 局 。 

@ 使 用 Dreamweaver CS6, 创 建 HTML 5 文档 ,在 其 中 创建 如 图 7-19 所 示 的 结构 代 
人 码 。 从 代码 结构 来 看 ,由 于 article 对 象 为 块 级 元 素 ,所 以 在 默认 情况 下 id 二 "left_ 
sidebar" 的 article 对 象 id 二 "contents" 的 article 对 象 和 id= "right_sidebar" 的 article 对 
象 ,应 该 纵向 排列 。 

加 为 了 区 分 各 个 板块 的 内 容 边 界 ,以 及 展现 盒 布 局 的 具体 效果 ,这 里 在 当前 页 面 的 
head 区 域 创 建 对 应 的 CSS 规则 ,如 图 7-20 所 示 。 

@ 保存 当前 页 面 文档 ,在 浏览 器 中 预览 即 可 看 到 效果 ,如 图 7-21 所 示 。 

从 图 中 可 以 看 出 ,本 案例 中 由 于 对 父 级 对 象 wrapper 应 用 了 “display: -webkit-box;” 
属性 ,致使 其 子 对 象 left_sidebar .contents 和 right_sidebar 在 没有 应 用 float 属性 的 情况 
下 ,实现 了 横向 排列 。 


7.4.2 弹性 盒 布局 相关 属性 详解 


7.4.1 小节 简单 介绍 了 盒 布 局 的 使 用 方法 ,细心 的 读者 可 以 发 现在 案例 7-5 中 ,将 
left_sidebar、contents 和 right_sidebar 三 个 容器 的 宽度 都 进行 了 设 定 , 这 种 处 理 办 法 不 能 
跟随 浏览 器 宽度 的 变化 而 变化 ,如 何 解决 这 个 问题 呢 ? 








boay> 
<aiv id="wrapper"> 
<article id="left sidebar"> 
<h2> 左 便 边栏 </h2> 
<ul> 
<1li><a href="#"> 文 本 导航 </a></1i> 
<li><a href: 
<li><a href: 
<li><a href="#"> 文 本 导航 c/a></1i> 
</al> 
</article> 
<article id="contenta"> 
<h2> 文 本 内 容 </h2> 
<p>| 
<p>| 
<py| 
</article> 
<article id="right_sidebar"> 
<h2> 右 便 边栏 </h2> 
<ul> 
<1i><a href="#"> 文 本 导航 </a></1i> 
<1li><a href="#"> 文 本 导航 </a></1i> 
<1i><a href="#"> 文 本 号 航 </a></1i> 
































</article> 
</div> 
[</body> 
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[Escyie type="text/css"> | 

#wrapper { 
display: -webkit-box| 
display: box; 

)/* 将 当前 对 象 设置 为 盒子 显示 */ 

#left sidebar { 
background: #FCO; 
padding: Spx; 
width: 200px; 

} 

#right_ sidebar { 
background: #39C; 
padding: Spx; 
width: 200px; 

#contents { 
background: #C69; 
Padding: Spx; 
width: 300px; 

) 


/style> 


图 7-20 案例 7-5 的 CSS 规则 











该 对 象 没有 
使 用 float 属 性 





六 该 对 象 没有 
使 用 float 属 性 


7-21 盒 布 局 的 预览 效果 


1. box-flex 属性 


box-flex 属性 规定 盒子 的 子 元 素 是 否 可 伸缩 其 尺寸 。 可 伸缩 元 素 能 够 随 着 盒子 的 缩小 
或 扩大 而 缩写 或 放大 ,只 要 盒子 中 有 多 余 的 空间 ,可 伸缩 元 素 就 会 扩展 来 填充 这 些 空间 。 

box-flex 属性 的 值 是 一 个 整数 或 小 数 。 当 盒子 中 定义 多 个 box-flex 属性 的 子 元 素 
时 ,浏览 器 会 将 所 有 box-flex 属性 值 相 加 ,然后 根据 各 自 的 值 占 总 值 的 比例 分 配 剩 余 空 
间 ,例如 ,盒子 A 中 包含 B 和 C 两 个 子 元 素 ,其 中 BB 的 box-flex 属性 值 为 1,C 的 box-flex 
属性 值 为 2, 则 说 明 B 占据 1/3 的 剩余 空间 ,C 占据 2/3 的 剩余 空间 。 
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【案例 7-6】 box-flex 属性 。 

@ 使 用 案例 7-5 中 的 代码 结构 ,继续 完善 相关 内 容 。 

@ 在 head 区域 的 CSS 规则 中 ,删除 id 王 "contents" 的 article 对 象 中 原来 指定 宽度 
为 300px 的 样式 代码 ,新 增 “-webkit-box-flex:1;” 代 码 。 保 存 当 前 页 面 文 档 , 在 浏览 器 中 
预览 即 可 看 到 效果 ,如 图 7-22 所 示 。 











图 7-22 ”box-flex 属性 预览 效果 


2. box-ordinal-group 属性 
box-ordinal-group 属性 用 来 控制 各 个 元 素 的 显示 顺序 ,其 值 越 小 的 
是。 元素 越 会 显示 在 前 面 , 其 值 相同 的 多 个 元 素 , 它 们 显示 的 次 序 取决 于 原 
回忆 次序。 
【案例 7-7】 box-ordinal-group 属性 。 
J@ 使 用 案例 7-5 中 的 代码 结构 ,继续 完善 相关 内 容 。 
@ 在 head 区 域 的 CSS 规则 中 ,分别 为 left_sidebar、contents 和 right_sidebar 三 个 容器 增加 
“-webkit-box-ordinal-group: 3;”“-webkitboxordinal-group: 2;” 和 “-webkit-box-ordinal-group: 
1;” 三 个 CSS 规 则 。 保 存 当 前 页 面 文档 ,在 浏览 器 中 预览 即 可 看 到 效果 ,如 图 7-23 所 示 。 





DD bon ordnel roup Bs « NW 
> [a 








图 7-23 ”box-ordinal-group 属性 预览 效果 


从 图 中 可 知 , 虽 然 没 有 改变 HTML 5 的 结构 代码 ,但 是 通过 盒 布 局 的 相关 属性 ,同样 
可 以 改变 各 个 容器 显示 的 次 序 , 这 种 处 理 方法 方便 开发 者 对 布局 进行 调整 。 

3. box-orient 属性 

在 CSS 3 中 ,box-orient 属性 用 于 指定 元 素 的 排列 方向 ,设计 者 可 以 简单 地 将 多 个 元 
素 的 排列 方式 从 水 平方 向 改变 为 垂直 方向 ,或 者 垂直 方向 改变 为 水 平方 向 。 


第 7 章 框架 、 模 板 与 CSS 3 新 增 布 局 


【案例 7-8】 box-orient 属性 。 

J@ 使 用 案例 7-5 中 的 代码 结构 ,继续 完善 相关 内 容 。 

@ 在 head 区 域 的 CSS 规则 中 ,针对 wrapper 容器 修改 CSS 规则 ,在 其 中 增加 
“-webkit-box-orient: vertical; ”规则 。 


@ 保存 当前 页 面 文档 ,在 浏览 器 中 预览 即 可 看 到 效果 ,如 图 7-24 所 示 。 





4. box-pack 属性 与 box-align 属性 

在 使 用 盒 布局 时 ,通常 将 box-pack 属性 与 box-align 属性 组 合 使 用 
来 指定 元 素 中 文字 、 图 像 或 子 元 素 的 对 齐 方式 。box-pack 属性 用 于 管 
理 水 平方 向 上 的 空间 ,box-align 属性 用 于 管理 垂直 方向 上 的 空间 。 两 














图 7-24 ”box-orient 属性 预览 效果 





个 属性 的 取 值 及 其 含义 详 见 表 7-2。 


表 7-2 box-pack 属性 与 box-align 属性 的 取 值 及 其 含义 











属性 | 取 值 全 党 
start 所 有 子 元 素 显 示 在 盒子 的 左 侧 ,剩余 空间 显示 在 盒子 的 右 侧 
end 所 有 子 元 素 显示 在 盒子 的 右 侧 ,剩余 空间 显示 在 盒子 的 左 侧 
box-pack 





center 


剩余 空间 在 盒子 的 两 侧 平均 分 布 





justify 








剩余 空间 在 子 元 素 之 间 平均 分 布 ,在 第 一 个 和 最 后 一 个 元 素 的 前 、 后 不 分 配 空间 
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续 表 





属 性 | 取 值 含义 





start 所 有 子 元 素 显示 在 盒子 的 顶部 ,剩余 空间 显示 在 盒子 的 底部 





end 所 有 子 元 素 显 示 在 盒子 的 底部 ,剩余 空间 显示 在 盒子 的 顶部 





box-align | center | 剩余 空间 在 盒子 的 上 、 下 两 侧 平均 分 布 





baseline | 所 有 元 素 按照 它们 的 基线 排列 





stretch | 所 有 子 元 素 高 度 被 拉 伸 ,调整 到 适合 盒子 的 高 度 











【案例 7-9】 box-pack 属性 与 box-align 属性 。 
Oa 使 用 Dreamweaver CS6 创建 HTML 5 文档 ,在 其 中 创建 如 图 7-25 所 示 的 结构 
代码 。 





Kbody> 
<div id="box"> 


<div><img src="7-9 images/1.png" width="128" height="128"></div>| 
<div><img src="7-9 images/2.png" width="128" height="128"></div>| 
<div><img src="7-9 images/3.png" width="128" height="128"></div>| 
<div><img src="7-9 images/4.png" width="128" height="128"></div>| 





图 7-25 案例 7-9 的 页 面 结构 


@ 在 当前 页 面 的 head 区 域 创建 对 应 的 CSS 规则 ,如 图 7-26 所 示 。 


<style type="text/css"> 
#box { 
border: 1px #FF0000 solid; 
display: -webkit-box;/* 定 义 该 容器 使 用 合子 模型 进行 显示 */ 
width: S580px; 
height: 400px; 
-webkit-box-pack: center; 
/* 设 置 其 子 元 素 水 平方 向 居中 对 齐 */ 
-webkic-box-align: center; 
/* 设 置 其 子 元 素 垂直 方向 居中 对 齐 */ 
} 
#box div { 
border: 1px #FF0000 solid; 
margin: Spx; 
} 
</style> 











图 7-26 设置 容器 以 盒子 模型 形式 显示 


@ 保存 当前 页 面 文档 ,在 浏览 器 中 预览 即 可 看 到 效果 ,如 图 7-27 所 示 。 此 外 ,通过 
改变 box 容器 的 box-pack 属性 与 box-align 属性 的 不 同 参数 ,还 可 以 使 其 内 部 的 子 元 素 
布局 产生 多 样 变化 ,如 图 7-28 和 图 7-29 所 示 。 
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站 bex-pack 旦 生 Sbox-aic x 民 
ns ~ 














O00' 


7-27 案例 7-9 的 预览 效果 (1) 




















-webkit-box-pack: start; 
-webkit-box-align: end; 























-webkit-box-pack:justify; 
-webkit-box-align:stretch; 
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目前 ,移动 设备 发 展 迅 速 ,浏览 者 已 经 不 局 限于 通过 台式 机 上 网 浏 
览 网 页 ,平板 电脑 和 智能 手机 是 发 展 较 快 的 移动 终端 , 越 来 越 多 的 浏览 
者 通过 这 些 终端 设备 访问 站 点 ,因此 ,如 何 提高 用 户 在 不 同 终端 设备 上 的 体验 是 开发 者 需 
要 解决 的 问题 。 


7.5.1 响应 式 布局 


随 着 现在 各 种 终端 的 快速 发 展 ,制作 出 能 够 适应 不 同 分 辨 率 、 不 同 平台 \ 不 同 屏 幕 大 
小 的 网 页 尤为 重要 ,这 不 仅 使 网 站 适应 不 同 终端 的 能 力 更 强 , 同 时 也 为 用 户 带 来 了 良好 的 
体验 。 

响应 式 布局 也 可 以 称 为 响应 式 Web 设计 , 它 仅 仅 是 一 个 设计 理念 ,这 个 理念 是 为 解 
决 移动 互联 网 浏览 效果 而 诞生 的 。 其 核心 思想 就 是 一 个 网 站 能 够 兼容 多 个 终端 ,而 不 是 
为 每 个 终端 做 一 个 特定 的 版 本 。 

响应 式 布局 的 优点 如 下 。 

(1) 面 对 不 同 分 辩 率 设备 灵活 性 强 。 

(2) 能 够 快速 解决 多 设备 显示 适应 问题 。 

响应 式 布局 的 缺点 如 下 。 

(1) 需要 对 应 多 种 设备 编写 CSS 代码 ,效率 低下 。 

(2) 代码 累 歼 ,加 载 时 间 加 长 。 

(3) 即使 使 用 了 响应 式 布局 也 不 能 兼容 所 有 设备 ,多 方面 因素 影响 而 达 不 到 最 佳 
效果 。 

(4) 在 多 种 设备 下 看 到 的 页 面 效 果 会 有 不 同 , 一 定 程度 上 改变 了 网 站 原 有 的 布局 结 
构 , 有 可 能 会 出 现 访 问 者 对 网 站 的 辨识 度 不 高 的 情况 。 

响应 式 布 局 虽然 有 多 种 缺点 ,但 无 法 掩盖 其 优点 一 一 让 访问 者 能 够 在 多 种 设备 环境 
下 得 到 良好 的 体验 。 

需要 特别 指出 的 是 ,设计 者 在 决定 使 用 响应 式 布局 前 ,需要 了 解 目 标 人 群 的 上 网 模 
式 。 如 果 针 对 的 是 桌面 端的 人 群 ,暂时 不 要 使 用 响应 式 布局 ;如 果 针 对 的 是 移动 端的 人 
群 ,还 是 有 必要 使 用 响应 式 布局 的 。 
7.5.2 使 用 CSS 3 的 media query 实现 响应 式 布局 

在 CSS 3 中 新 增 了 media query 模块 ,该 模块 允许 添加 媒体 查询 (media query) 表 达 
式 用 于 指定 媒体 类 型 ,然后 根据 不 同 的 媒体 类 型 选择 相应 的 样式 。 

1. media query 的 语法 

媒体 查询 让 CSS 可 以 更 精确 作用 于 不 同 的 媒体 类 型 和 同一 媒体 的 不 同 条 件 。 媒 体 
查询 的 大 部 分 媒体 特性 都 接受 min 和 max 用 于 表达 “大 于 或 等 于 ”和 “小 于 或 等 于 ”。 通 
过 这 个 标签 属性 ,可 以 很 方便 地 在 不 同 的 设备 下 实现 丰富 的 界面 ,具体 的 语法 如 下 。 
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emedia 设备 名 称 only (选取 条 件 ) not (选取 条 件 ) and (选取 条 件 ) ,设备 二 {sRules} 
这 里 设备 名 称 指 的 是 CSS 中 的 设备 类 型 ,常见 的 有 以 下 内 容 。 

(1) all: 用 于 所 有 设备 类 型 。 

(2) screen: 用 于 计算 机 显示 器 。 

(3) projection: 用 于 投影 显示 ,如 幻灯 片 演示 。 

(4) handheld: 用 于 小 型 或 手持 设备 。 

(5) print: 用 于 打印 预览 模式 。 

(6) braille: 用 于 触觉 反馈 设备 。 


2. 使 用 media query 
1) 在 二 link 二 中 使 用 @media 
用 户 可 以 通过 在 二 link 二 标签 中 设置 media 属性 来 添加 media query 规则 。 例 如 : 


< link rel= "stylesheet" type= "text/css" media= "screen and (max- width:800px)" 
href="style-A.css"> 
< link rel= "stylesheet" type= "text/css" media= "screen and (max- width:600px)" 
href= "style-B.css"> 
上 述 代 码 的 含义 是 , 当 设 备 显 示 宽 度 小 于 或 等 于 800 像素 时 ,页 面 引用 style-A. css 
样式 文件 泻 染 页 面 ; 当 设 备 显 示 宽 度 小 于 或 等 于 600 像素 时 ,页 面 引用 style-B. css 样式 
文件 泻 染 页 面 。 
2) 在 样式 表 中 赔 入 @media 
在 样式 表 中 岩 入 @media 时 ,直接 书写 即 可 。 例 如 : 
@media screen and (max- width:700px) { 
#content { 
background:red; 


和 


上 述 代码 的 含义 是 , 当 设备 显示 宽度 小 于 或 等 于 700 像素 时 ,名 为 content 的 容器 背 
景色 设置 为 红色 。 

【案例 7-10】 media query。 

@ 使 用 Dreamweaver CS6 创建 HTML 5 文档 ,在 其 中 创建 如 图 7-30 所 示 的 结构 代码 。 

@ 为 适应 屏幕 ,多 数 的 移动 浏览 器 会 把 HTML 网 页 缩放 到 设备 屏幕 的 宽度 。 开 发 
者 可 以 使 用 二 meta 二 标签 的 viewport 属性 来 进一步 设置 。 在 当前 页 面 的 head 区 域内 输 
和 人 代码 “一 meta name 二 "viewport" content 二 "width 二 device-width，initial-scale 一 1.0" 二 ”。 
该 代码 的 作用 是 告诉 浏览 器 使 用 设备 屏幕 宽度 作为 内 容 的 宽度 ,并 且 忽 视 初 始 的 宽度 
设置 。 

G) 在 当前 页 面 的 head 区 域内 ,创建 初始 化 状态 下 页 面 的 一 般 性 规则 如 图 7-31 所 示 。 
保存 当前 页 面 文档 ,通过 浏览 器 预览 可 知 无 论 如 何 缩放 浏览 器 窗口 大 小 ,其 页 面 内 容 均 无 
变化 ,如 图 7-32 所 示 。 
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body> 
<aiv id="pagewrap"> 
<div id="header"> 
<h2>header</h2> 
<p> 文 本 内 容 </p> 
</div> 
<div id="content"> 
<h2>content</h2> 
<p> 文 本 内 容 </p> 
<p> 文 本 内 容 </p> 
<p> 文 本 内 容 </p> 
<p> 文 本 内 容 </p> 
</div> 
<div id="sidebar"> 
<h2>sidebar</h2> 
<p> 文 本 内 容 </p> 
<p> 文 本 内 容 </p> 
</div> 
<div id="footer"> 
<h2>foocer</h2> 
<p> 文 本 内 容 </p> 
</div> 
</div> 
/body> 


图 7-30 ”案例 7-10 的 页 面 结构 











》 


) 


} 





图 7-31 


#pagewrap, #header, #content, 
#sidebar, #footer { 


#pagewrap { 


#header { 


#content { 


#sidebar { 


#footer { 


padding: Spx; 
border: 1px solid red; 
margin-bottom: Spx; 


width: 1000px; 
margin: 20px auto; 


height: 130px; 
background: #FFO; 


width: 650px; 
float: left; 


width: 300px; 
background: #FFO; 
float: right; 


clear: both; 





案例 7-10 的 初始 CSS 规则 





header 


文本 内 容 





content 
文本 内容 
文本 内 容 
文本 内 容 
文本 内 容 





sidebar 


文本 内 容 
文本 内 容 





footer 
文本 内 容 
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@ 为 了 能 让 浏览 器 在 缩小 的 同时 ,内 容 跟随 窗口 大 小 自动 调整 ,需要 单独 为 其 编写 


CSS 规则 ,如 图 7-33 所 示 。 预 览 效 果 如 图 7-34 所 示 。 


@ 假如 显示 宽度 一 直 减 小 ,有 可 能 损害 浏览 者 的 体验 效果 ,这 里 拟 将 页 面 布 局 进行 
改变 ,以 应 对 显示 区 域 宽度 变 小 时 的 情况 。 具 体 的 CSS 规则 如 图 7-35 所 示 。 预 览 效 果 如 


图 7-36 所 示 。 


本 案例 中 , 当 显 示 区 域 宽度 小 于 700 像素 时 ,将 页 面 的 侧 边 栏 放 管 到 主要 内 容 区 域 的 
下 方 ,页 面 布局 的 改变 使 得 浏览 者 无 论 在 桌面 端 还 是 移动 端 都 能 够 看 到 页 面 的 内 容 , 体 验 


效果 有 所 增加 。 
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/*-- 当 设备 显示 宽度 小 于 或 等 于 1004 像 素 时 ， 使 用 以 下 规则 --*/ 
Emedia screen and (max-width:1004px) { 
#pagewrap { 
width: 95%; 
}V* 设 置 宽度 为 显示 器 宽度 的 95$*/ 
#content { 
width: 65%; 
} 
#sidebar { 
width: 30%; 


} 
图 7-33 显示 宽度 小 于 或 等 于 1004 像素 时 的 CSS 规 则 





DD media query 
¢3CIa 











header 


文本 内 容 








content 
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7-34 窗口 宽度 小 于 或 等 于 1004 像素 时 的 预览 效果 





/*- 一 当 设 备 显示 宽度 小 于 或 等 于 700 像 素 时 ， 使 用 以 下 规则 --*/ 
Emedia screen and (max-width:700px) { 
#content { 
width: autos; 
float: none; 
}/* 设 置 容器 宽度 为 自动 ， 即 宽度 自 适应 ， 同 时 去 除 浮动 属性 ,各 
块 级 容器 纵向 排列 */ 
#sidebar { 
width: autor 
float: none; 
} 
} 


图 7-35 显示 宽度 小 于 或 等 于 700 像素 时 的 CSS 规 则 
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图 7-36 窗口 宽度 小 于 或 等 于 700 像素 时 的 预览 效果 


7.6 ”过 程 指导 一 一 制作 适合 多 种 设备 终端 显示 的 
响应 式 页 面 


本 节 将 从 响应 式 页 面 的 设计 构思 出 发 ,结合 相关 CSS 的 内 容 , 向 读者 详细 讲解 响应 
式 页 面 的 制作 方法 ,请 读者 着 重 体会 响应 式 页 面 在 制作 之 初 的 思维 过 程 。 


7.6.1 过 程 分 析 


本 节 的 主要 任务 是 完成 适合 多 种 设备 终端 显示 的 响应 式 页 面 ,这 里 将 多 种 设备 范围 
限制 为 台式 机 桌面 显示 ,平板 电脑 显示 和 智能 手机 屏幕 显示 。 


1. 了 解 设备 分 辩 率 

在 使 用 响应 式 布局 设计 页 面 时 ,需要 提前 了 解 终端 设备 的 显示 分 辨 率 , 目 前 主流 台式 
机 桌面 显示 分 辨 率 为 1440X900 像素 以 上 ;平板 电脑 显示 分 辩 率 为 1024X768 像素 以 上 ; 
智能 手机 显示 分 辨 率 为 480X 800 像素 以 上 。 其 实 , 在 实际 工作 中 某 个 网 页 并 不 能 适应 所 
有 终端 设备 ,而 是 适应 常见 的 多 种 设备 而 已 。 

在 了 解 常规 分 辩 率 以 后 ,本 案例 中 拟 将 响应 式 页 面 的 宽度 做 3 个 方面 的 划分 ,第 一 个 


第 7 章 框架 、 模 板 与 CSS 3 新 增 布 局 


是 当 显示 分 辨 率 宽度 大 于 1300 像素 时 ,页 面 适合 在 台式 机 中 浏览 ;第 二 个 是 当 显 示 分 辨 
率 大 于 600 像素 并 小 于 1300 像素 时 ,页 面 适 合 在 平板 电脑 中 浏览 ;第 三 个 是 当 显示 分 辨 
率 小 于 400 像素 时 ,页 面 适合 在 智能 手机 中 浏览 。 


2. 确定 基本 页 面 

无 论 响应 式 页 面 适合 多 少 种 设备 ,最 初 都 需要 确定 一 个 基本 页 面 布局 , 当 基本 页 面 确 
定 完成 后 ,再 根据 不 同 设备 编写 对 应 的 CSS 规则 。 这 些 CSS 规则 并 非 将 整个 页 面 的 规则 
重新 编写 ,而 是 修改 其 中 的 一 部 分 。 

就 本 案例 而 言 ,这 里 将 在 平板 电脑 中 显示 的 页 面 布局 作为 基本 布局 开始 ,如 图 7-37 
所 示 ,布局 示意 图 如 图 7-38 所 示 。 待 基本 布局 完成 后 ,修改 相应 的 CSS 规则 , 即 可 得 到 台 
式 机 和 智能 手机 的 布局 ,如 图 7-39 一 图 7-42 所 示 。 








“为 何 HTML 5 将 主宰 在 线 视频 ?” 


按照 语义 结构 创建 视频 可 以 让 网 络 机 器 人 抓 取 任 何 一 段 与 众 不 同 的 视 
频 驳 辑 。 它 将 获得 标签 等 任何 一 段 标准 的 网 页 视频 所 具备 的 信息 ， 并 方便 
被 抓 取 ， 相 应 地 ,视频 在 搜索 结果 中 的 排名 就 会 越 来 越 高。 

没有 采纳 HTML 5 技术 的 内 容 创建 者 已 经 落后 , 如 果 他 们 不 实施 
HTML 5 标准 , 将 很 快 淹没 在 尘埃 里 。 好 消息 是 ， 一些 公司 专注 发 扎 
HTML 5 的 最 大 优势 , 而 又 没有 任何 技术 障碍 。 那 些 依然 认为 Flash 是 在 线 
视频 主流 技术 钓 厂家 真 应 该 好 好 思考 了 。 
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图 7-37 屏幕 宽度 为 600~1300 像素 时 的 预览 效果 
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图 7-38 布局 示意 图 (平板 电脑 
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图 7-39 屏幕 宽度 大 于 1300 像素 时 的 预览 效果 
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图 7-40 布局 示意 图 (台式 机 ) 
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图 7-41 屏幕 宽度 小 于 400 像素 时 的 预览 效果 7-42 布局 示意 图 (智能 手机 ) 


需要 特别 指出 的 是 , 当 页 面 确定 要 使 用 响应 式 布局 实现 时 ,其 中 各 个 容器 的 宽度 不 能 
设置 为 固定 值 ( 如 width:200px) ,应 该 设置 为 相对 值 (如 width:58%)。 所 以 ,在 整体 规划 
过 程 中 根据 上 述 3 种 布局 示意 图 ,这 里 预先 设 定 重要 板块 的 宽度 ,inner 的 宽度 为 
93.75% ;mast 的 宽度 为 32%;intro 的 宽度 为 66%;main 的 宽度 为 66%;footer 的 宽度 
为 66%。 


7.6.2 步骤 详解 


1. 创建 站 点 
(1) 启动 Dreamweaver CS6 创建 站 点 ,并 在 站 点 中 创建 用 于 放置 图 片 的 images 文件 


夹 和 放置 CSS 文件 的 style 文件 夹 。 
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(2) 新 建 空 白 HTML 5 文档 ,并 将 该 文档 重 命名 为 index. html。 

(3) 新 建 空白 CSS 文档, 并 将 该 文档 重 命名 为 style. css。 

(4) 将 外 部 样式 文件 style. css 链接 到 index. html 页 面 。 

(5) 在 页 面 的 head 区域, 插入 “一 meta name 一 "viewport”content 一 "width 一 device- 
width，initial-scale 王 1.0" 过 "标签 ,用 于 告诉 终端 设备 的 浏览 器 使 用 设备 屏幕 宽度 作为 
内 容 的 宽度 ,并 且 忽视 初始 的 宽度 设置 。 


2. 平板 电脑 环境 下 左 侧 导航 的 制作 

(1) 在 设计 视图 的 页 面 中 ,在 “插入 ?面板 的 “常用 ?类别 中 单 击 * 插 入 Div 标签 ”按钮 ， 
使 用 软件 可 视 化 界面 插入 嵌 套 的 DIV 容器 。 读 者 也 可 以 将 光标 定位 在 代码 视图 中 手动 
输入 相关 标签 创建 谋 套 的 DIV 容器 ,具体 的 页 面 结构 如 图 7-43 所 示 。 

(2) 切换 到 style. css 文件 中 ,创建 系列 初始 化 规则 ,如 图 7-44 和 图 7-45 所 示 。 


hemi, body, div, span, hi, h2, h3, h4, h5, h6, Pp, a, em, 
font, img, ins, ol, ul, 1i{ 
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
font-size: 100%; 
vertical-align: baseline;/* 设 置 元 素 的 番 直 对 齐 方式 */ 
background: transparent;/* 设 置 背景 为 透明 */ 
} 
body (line-height: 1;)/* 设 置 行 高 为 1*/ 
ol，ul {1ist-style: none;}/* 青 除 列表 的 默认 样式 外 观 */ 
body 1 
background: #E4E4E4 url( 
color: rgba(0, 0, 0, 0.8 
podyS font: normal 100% "微软 雅 黑 "; 
<aiv id="page"> -moz-text-shadow: 0 lpx 0 rgba(255, 255, 255, 0.8); 
<div class="inner"> -webkit-text-shadow: 0 ipx 0 rgba(255, 255, 255, 0.8); 
<div class="mast"></div> text-shadow: 0 lpx 0 rgba(255, 255, 255, 0.8); 
/* 设 置 页 面 所 有 文字 均 有 阴影 效果 */ 











ges/bg .png) : 
设置 字体 颜色 和 透明 度 */ 








~webkit-text-size-adjust: none; 








图 7-44 初始 化 页 面 规则 (1) 





color: #890101; 


text-decoration: none; 
-moz-transition: 0.23 color linear; 
-webkit-transition: 0.2s color linear; 
transition: 0.2s color linear; 

3}/* 设 置 超 树 接 颜色 和 过 渡 效 果 */ 

a:hover {color: #DF3030;} 

p itext-indent; 2em;} 

/* 设 置 段落 编 进 2 个 汉字 的 距离 */ 

.inner { 
margin: 0 autor 
Width: 93.75$; 

)V* 设 置 页 面 核心 区 域 居中 ， 宽 度 为 93 .75%*/ 

#page { 
background: url(../images/rag.png) repeat-x; 
padding: 2em 0; 


img {max-width: 100%;) 
|/* 设 置 图 像 元 素 最 大 宽度 为 原始 尺寸 的 100#*/ 
mast { 

float: left; 

width: 328; 








7-45 初始 化 页 面 规则 (2) 
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(3) 在 应 用 mast 类 的 DIV 容器 内 部 使 用 hl 元 素 创建 标题 ,使 用 ul 元素 创建 导航 列 
表 。 将 hl 元 素 命名 为 logo, 并 插入 图 像 , 将 ul 元 素 应 用 nav 类 ,此 时 的 页 面 结构 如 图 7-46 
所 示 。 








div id-"page"> 
<div class="inner"> 
<div class="mast"> 
<h1 id="logo"><a href="#"><img src-"images/l0ogo.png"></a></hl: 
<ul class="nav"> 
<li><a href="#">HTML 5 共享 c/a></1i> 
<li><a href="#">HTML 5 资讯 c/a></1i> 
<li><a href="#">HTML 5 教程 </a></1i> 
<li><a href="#">HTML 5 资源 </a></1i> 
<li><a href="#">HTML 5 模板 </a></1i> 
</al> 
</div> 
</div> 
/div> 















7-46 ”创建 左 侧 导 航 


(4) 切换 到 style. css 文件 中 ,创建 与 列表 相关 的 CSS 规则 ,如 图 7-47 所 示 。 需 要 说 
明 的 是 ,nav 类 中 的 宽度 设置 为 65% ,该 数字 是 指 宽度 设置 为 父 一 级 容器 宽度 的 65% ,由 
于 应 用 nav 类 的 ul 元 素 父 一 级 元 素 为 mast 元 素 ,所 以 该 元 素 的 实际 宽度 等 于 “屏幕 宽 
度 " 乘 以 32% 再 乘 以 65%。 通 过 浏览 器 预览 效果 ,如 图 7-48 所 示 。 


flogo 1 
background: 

url (. ./images/1ogo-bg.png) no-repeat 

508 0: 


#logo a { 
Padding-top: 117px; 
height: 162px; 
display: block; 
text-align: center; 


ul.nav { 
margin: 2em auco 0; 
width: 65$;/* 宽 度 为 父 一 级 宽度 的 65%*/ 
} 
ul.nav a t 
font: bold 16px/1.2 "微软 雅 黑 "; 
display: block; 
text-align: center; 
padding: lem 0.5em lem; 
border-bottom: 1px #333333 dashed;| 


ul .nav a:hover {color: #F00;} 


图 7-47 左 侧 导 航 对 应 CSS 规则 7-48 左 侧 导 航 预览 效果 

















3. 平板 电脑 环境 下 右 侧 内 容 的 制作 

(1) 将 光标 定位 在 拆 分 视图 的 代码 窗 格 内 ,手动 插入 多 个 DIV 容器 ,具体 结构 如 
图 7-49 所 示 。 需 要 说 明 的 是 ,一 div class 王 "section intro" 二 一 /div 过 的 含义 是 该 DIV 容 
器 同时 应 用 section 类 和 intro 类 规则 。 

(2) 根据 页 面 内 容 的 需要 在 第 一 个 DIV 容器 内 部 插入 标题 和 段落 文字 ,具体 的 页 面 
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/ 结构 如 图 7-50 所 示 。 
(3) 切换 到 style. css 文件 中 ,创建 相关 的 CSS 规则 ,如 图 7-51 所 示 。 通 过 浏览 器 预 


览 效果 如 图 7-52 所 示 。 





body> 
<div id="page"> 
<div class="inner"> 
st"> 





“ection:after, ul.nav:after { 
content: mo 
ection intro"></div> Pp 
height: 0; 


ection main"></div> 
class="footer"></div> Suen oy 
visibility: hidden; 
)}V* 使 用 伪 类 的 方式 清除 某 个 对 象 的 浮动 属性 */| 
.intro, .main, .footer { 
float: right; 
width: 66¥; 














.inrro { 
margin-top: 117px; 


,intro div { 
line-height: 1.4; 

)/* 设 置 行 高 为 1 .4 众 行 高 */ 

.intro h2 ( 
font: normal 2em "微软 雅 黑 "; 





text-align: center; 
margin-bottom: 0.25em; 





<div class="section main"></div> 
<div class="footer"></div> 


图 7-50 丰富 应 用 intro 类 容器 的 内 容 图 7-51 应 用 intro 类 容器 的 CSS 规则 











为何 HTML5 将 主宰 在 线 视频 ?“ 


按照 话 义 结构 凶 建 视频 可 以 让 网 络 机 如 人 抓 芭 任何 一 筑 与 众 不 同 的 
视频 劳 枪 ， 它 将 获得 标 答 等 任何 一 段 标准 的 网 页 视频 所 具备 的 信息 ， 并 
方便 波 抓 取 ， 框 应 地 ,视频 在 控 索 结 早 中 的 排名 就 会 越 不 越 高. 

没有 采纳 HTML5 技 术 的 内 容 创 建 者 已 经 藻 后 ， 如 杂 他 们 坏 实 施 


HTML5 标 准 ， 档 很 快 泪 没 在 尘 铸 里 。 好 消息 是 ， 一 些 公司 专注 发 据 
HTML5 的 县 大 优势 ， 而 又 没有 任何 技术 降 碍 。 那 些 焦 然 认为 Flash 是 在 线 
视频 主流 技术 的 厂 率真 应 该 好 好 已 考 了 。 





图 7-52 平板 电脑 环境 下 的 预览 效果 


(4) 在 应 用 main 类 的 DIV 容器 内 部 ,创建 标题 和 有 序列 表 并 插入 图 像 ,此 时 的 页 面 
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结构 如 图 7-53 所 示 。 














Ra crasse="section mata™s 
<h2>HIML Séamp;C55 3</h2> 
<ol> 
<1i class="figure"> "><img src-"images/01.jpg"> <span>HTML 5 网 站 欣 宣 </span> </a> </1i> 
<11 class="figure"> <a href="#"><img src="images/02.jpg"> <span>HTML 5 网 站 欣 营 </span> </a> </1i> 
<11i class="figure"> <a srcr"images/03.jpg"> <span>HTML 5 网 站 欣 得 </span> </a> </1i>| 
<1i clas: igure"> <a src="images/04.jpg"> <span>HTML 5 网 站 欣赏 </span> </a> </1i>| 
<1i class="figure"> <a href="#"><img src-"images/05.jpg"> <span>HTML 5 网 站 欣 时 </span> </a> </1i> 
<1i class="figure"> <a href="#"><img src-"images/06.jpg"> <span>HTML 5 网 站 欣 祷 </span> </a> </1i>| 
</ol> 
[e/aiv> 








图 7-53 使 用 有 序列 表 作 为 容器 制作 图 文 信息 列表 


(5) 切换 到 style. css 文件 中 ,创建 相关 的 CSS 规则 ,如 图 7-54 所 示 。 通 过 浏览 器 预 


览 效 果 如 图 7-55 所 示 。 





vain h2 { 
font-size: 1.4em; 
text-align: center; 
margin: 0.75em 0 lem; 

) 


figure { 
float: left; 
font-size: 14px; 


line-height: 1.1; 
margin: 0 3,1% 1.5em 0; 
Text-align: center; 
width; 30$; /* 这 里 的 宽度 不 是 固定 值 ， 而 是 相对 值 ， 可 
以 实现 图 像 随 窗口 大 小 变化 而 自动 变化 */ 
Text-transform: uppercase; 
letter-spacing: 0.0Sem; 





) 
.figure img { 





-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
-webkic-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
display; block; 
margin: 0 auto lem; 

}/* 设 置 图 像 的 图 前 边框 ， 以 及 图 像 四 周 的 阴影 效果 */ 





图 7-54 图 文 信息 列表 的 CSS 规则 
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HTML 5 网 站 欣 尝 HTML 5 网 站 欣 兰 


7-55 图 文 信息 列表 的 预览 效果 
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(6) 在 应 用 footer 类 的 DIV 容器 内 部 ,插入 与 版 权 相 关 的 文字 内 容 , 具 体 结构 如 
图 7-56 所 示 。 切 换 到 style. css 文件 中 ,创建 相关 的 CSS 规则 ,如 图 7-57 所 示 。 至 此 , 适 
合 平板 电脑 的 基本 页 面 布局 已 经 全 部 完成 。 


div class="footer"> 
<p>Illustrations by <a href="#">dx</a>, words by <a href="#">wf</a>.</p> 
<p>What remains is by <a href="#">wyz</a>.</p> 

[</div> 














图 7-56 版 权 部 分 的 页 面 结构 


4. 使 用 @media query 编写 显示 宽度 大 于 1300 像素 时 的 CSS 规则 
(1) 根据 预先 绘制 完成 的 布局 示意 图 ,设置 某 个 容器 的 具体 位 置 。 
(2) 切换 到 style. css 文件 中 ,创建 以 下 规则 。 

@media screen and (min-width:1300px) { 具体 规则 要 书写 在 此 大 括号 内 } 


(3) 在 @media query 语句 结构 内 创建 相应 的 CSS 规则 ,如 图 7-58 所 示 。 





emedia screen and (min-width:1300px) { 
-mast { 

float: none; 

width: auto 


#logo { 
float: left; 
width: 32%; 


-nav ( 
float: right; 
margin: 40px 0 lem; 
text-align; center; 


Width; 66%; 
)/* 设 置 导航 右 便 浮动 ， 宽 度 与 基本 布局 页 而 
中 其 余 右 侧 容器 的 宽度 相同 */ 
“Footer { :nav 11{ 
background: float: left; 
url (../images/ornament .png)| margin-right: 3.3%; 
50% 0 repeat-x; width: 16%; 
font-size: 12px; }/* 设 置 横向 导航 的 宽度 与 间隔 距离 */ 
text-align: center; -intro {margin-top: lem;} 
padding: 40px 0 20px; .figure { 


margin-right: 2.5%; 


,foorer p { 


Width: 14$¥; 
margin-bottom: 0.Sem; }/* 设 置 图 文 信息 列表 中 图 像 的 宽度 和 间隔 距离 */ 
} 








7-57 与 版 权 部 分 相关 的 CSS 规则 图 7-58 显示 宽度 大 于 1300 像素 时 的 CSS 规则 


(4) 在 创建 过 程 中 ,用 户 可 以 通过 Dreamweaver CS6 窗口 下 方 的 “窗口 大 小 ”菜单 调 
整 当前 预览 区 域 的 显示 状态 ,如 图 7-59 所 示 。 保 存 当 前 页 面 ,通过 浏览 器 预览 后 即 可 看 
到 效果 。 


5. 使 用 @media query 编写 显示 宽度 小 于 600 像素 时 的 CSS 规则 

根据 预先 绘制 完成 的 布局 示意 图 ,切换 到 style. css 文件 中 ,创建 显示 宽度 小 于 600 像素 
时 的 CSS 规则 ,如 图 7-60 所 示 。 通 过 浏览 器 预览 后 即 可 看 到 效果 。 

至 此 ,当前 案例 适合 多 种 设备 显示 的 响应 式 页 面 布 局 已 经 制作 完成 。 此 外 ,读者 还 可 
以 向 CSS 规则 中 添加 多 种 显示 宽度 不 同 状态 下 的 CSS 规则 ,这 里 不 再 缆 述 。 
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240x 320 功能 手机 
320x 480 ”智能 手机 
480x 800 ”智能 手机 
592w 
768 x 1024 。 手板 电脑 
1000 x 620 ”(1024 x 768 , 最 大 化 ) 
1260x 875 ”(1280 x 1024 , 最 大 化 ) 
1420x 750 (1440 x 900 , 最 大 化 ) 
1580 x 1050 。 (1600 x 1200 , 最 大 化 ) 
全 大 小 
疙 各 大 小 

Y 方向 横向 
方向 纵向 


V screen and (min-width1300pa) N 








媒体 襄 询 (M). 


dm vg 国 国 WITHV TI 
图 7-59 调整 预览 状态 

















Gmedia screen and (max-width:600px) { 
‘mast, .intro, .main, .footer { 
float: none; 


width: auto; 
)/* 清 除 所 有 重要 板块 的 浮动 属性 ， 使 其 看 直 排列 */ 
#1logo { 
background: none; 
)/* 由 于 智能 手机 显示 区 域 有 限 ， 这 里 不 再 显示 装饰 性 图 像 *// 
#logo a ¢ 
padding-top: 20px; 
height: 80px; 
display: block; 
) 
aa.nav { 
margin: 0 auto; 
width: 100%; 
) 
aa.nav 11 { 
float: left; 
margin-right: 3¥; 
width: 17%; 
) 
aa .nav a t 
font: 14px "微软 雅 黑 ": 
font-weight: bold; 
) 
-intro {margin-top: 10px;} 
.intro h2 {font-size: 1.4em;} 


} 


图 7-60 显示 宽度 小 于 600 像素 时 的 CSS 规 则 





7.7 自主 任务 一 一 制作 简单 响应 式 页 面 


根据 7. 6 节 的 案例 制作 ,读者 应 该 了 解 和 掌握 创建 响应 式 页 面 的 基本 流程 ,通过 本 节 
实 训 的 训练 ,可 以 进一步 掌握 响应 式 布局 页 面 的 方法 ,页 面 最 终 效 果 如 图 7-61 和 图 7-62 
所 示 。 
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图 7-61 显示 宽度 大 于 600 像素 时 的 预览 效果 图 7-62 显示 宽度 小 于 600 像 
素 时 的 预览 效果 


7.8 习题 


1. 什么 是 iframe 元素? 
2. 制作 网 页 中 ,模板 的 作用 是 什么 ”如 果 修 改 模板 中 的 内 容 ,其 他 页 面 会 自动 更 


3. 如 何 将 一 个 已 经 完成 的 网 页 创建 为 模板 ? 

4. 在 CSS 3 中 ,如 果 想 创建 多 列 布局 ,需要 使 用 哪个 属性 来 完成 ? 

5. 如果 对 某 个 容器 使 用 “display: -webkit-box;” 属 性 , 则 该 容器 内 部 的 子 对 象 将 会 
有 何 变 化 ? 

6. 在 使 用 盒 布局 时 ,通常 将 哪 两 个 属性 组 合 使 用 来 指定 元 素 中 文字 、 图 像 或 子 元 素 
的 对 齐 方式 ? 

7. 什么 是 响应 式 布局 ? 在 什么 情况 下 使 用 响应 式 布局 ? 

8. 在 响应 式 页 面 的 head 区 域 通常 出 现 以 下 的 代码 。 


<meta name= "viewport" content= "width=device-width，initial- scale=1, 


maximum- scale=1"/> 


该 代码 的 含义 是 什么 ? 
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行为 与 Spry 构件 


【本 章 导读 】 

行为 能 够 帮助 不 熟悉 编程 的 设计 者 快速 插入 JavaScript 程序 ;Spry 构件 能 够 方便 地 
制作 出 多 级 菜单 栏 、 选 项 卡 式 面板 等 内 容 。 本 章 将 详细 讲解 它们 在 工作 中 的 使 用 方法 。 

【学 习 目 标 】 

名 了 解 行为 的 基本 概念 ,掌握 常见 行为 的 使 用 方法 ; 

扣 熟悉 Spry 构件 的 相关 知识 ,掌握 插入 Spry 构件 的 基本 方法 。 


8.1 行为 


行为 其 实 就 是 标准 的 JavaScript 程序 。 在 Dreamweaver CS6 中 提供 了 很 多 行为 动 
作 ,每 个 动作 可 以 完成 特定 的 任务 ,设计 者 只 要 在 这 些 特 定 的 功能 动作 中 选择 需要 的 行 
为 ,不 仅 可 以 实现 网 页 特效 ,还 不 需要 自己 编写 JavaScript 程序 , 极 大 地 方便 了 不 熟悉 编 
程 的 设计 者 。 
8.1.1 事件 与 动作 相关 概念 

行为 是 动作 和 触发 该 动作 的 事件 的 结合 体 。 要 想 在 页 面 中 添加 行为 ,需要 首先 制定 
一 个 动作 ,然后 再 制定 触发 该 动作 的 事件 ,这 样 才能 将 行为 添加 到 页 面 中 。 

1. 事件 

事件 是 触发 动态 效果 的 原因 , 它 可 以 被 附加 到 各 种 页 面 元 素 上 ,也 可 以 被 附加 到 
XHTML 标签 中 。 与 鼠标 相关 的 3 个 常见 事件 是 onClick 事件 ,onMouseOver 事件 和 


onMouseOnut 事件 ,不同 浏览 器 支持 的 事件 种 类 和 数量 不 同 , 通 常 较 高 版 本 的 浏览 器 能 够 
支持 更 多 的 事件 。 


2. 动作 

动作 是 一 段 预先 编写 的 JavaScript 代码 ,是 最 终 需 要 完成 的 动态 效果 。 例 如 ,打开 浏 
览 器 窗口 .弹出 窗口 ,交换 图 像 等 都 是 动作 。 在 Dreamweaver CS6 中 使 用 内 置 行为 ,系统 
会 自动 的 向 页 面 添加 JavaScript 代码 ,对 于 不 太 熟 悉 JavaScript 的 设计 人 员 非 常 适 合 。 

3. 事件 与 动作 之 间 的 关系 

在 将 行为 附加 到 某 个 页 面 元 素 之 后 ,每 当 该 元 素 的 某 个 事件 发 生 时 ,浏览 器 即 会 调用 
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与 这 一 事件 关联 的 动作 (JavaScript 代码 )。 例 如 , 将 onMouseOver 事件 与 一 段 
JavaScript 代码 相关 联 , 当 鼠标 指针 指向 页 面 元 素 上 时 ,就 可 以 执行 相应 的 JavaScript 代 
码 (动作 )。 一 个 事件 可 以 触发 多 个 动作 ,读者 还 可 以 在 官方 网 站 获取 更 多 的 行为 。 


8.1.2 “行为 ”面板 


在 Dreamweaver CS6 中 ,执行 “窗口 ">“ 行 为 ”命令 ,或 者 按 Shift 十 F4 键 , 即 可 打开 
“行为 ”面板 ,如 图 8-1 所 示 。“ 行 为 ”面板 包含 以 下 选项 。 

(1) 显示 设置 事件 国 ]: 仅 显 示 附 加 到 当前 文档 中 的 事 
件 ,每 个 类 别 的 事件 都 包含 在 可 折 释 的 列表 中 ,如 图 8-2 
所 示 。 

(2) 显示 所 有 事件 国 ]: 按 字母 顺序 显示 属于 特定 类 别 的 
所 有 事件 。 

(3) 添加 行为 [4J: 显示 行为 菜单 ,如 图 8-3 所 示 , 其 中 包 
含 可 以 附加 到 当前 选 定 元 素 的 动作 。 当 从 该 列表 中 选择 一 个 
动作 时 ,将 出 现 一 个 对 话 框 ,用 户 可 以 在 对 话 框 中 指定 该 动作 
的 参数 。 如 果菜 单 上 的 所 有 动作 都 处 于 灰色 禁用 状态 , 则 表 
示 选 定 的 元 素 无 法 生成 任何 事件 。 











图 8-1 “行为 ”面板 


标签 检 音 器 
性 | 行为 | 标签 <body> 


























图 8-2 显示 设置 事件 图 8-3 添加 行为 菜单 


(4) 删除 事件 国 | : 从 行为 列表 中 删除 所 选 的 事件 和 动作 。 
(5) 向 上 箭头 曙 和 向 下 箭头 加 : 在 行为 列表 中 上 下 移动 特定 事件 的 选 定 动作 。 对 
于 不 能 在 列表 中 上 下 移动 的 动作 ,箭头 按钮 将 处 于 禁用 状态 。 
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8.1.3 “弹出 信息 ”行为 


使 用 “弹出 信息 ”行为 将 显示 一 个 包含 指定 消息 的 JavaScript 警告 
窗口 ,该 警告 窗口 包含 JavaScript 警告 和 一 个 "确定 "按钮 。 使 用 此 行为 富 l 
只 能 提供 信息 ,而 不 能 为 用 户 提供 选择 。 弹 出 信息 一 般 有 两 种 形式 : 
中 打开 网 页 后 自动 弹出 “弹出 信息 ”对话 框 ; @ 通 过 单 击 某 个 对 象 弹出 对 话 框 。 

【案例 8-1】 添加 “弹出 信息 ”行为 。 

@ 启动 Dreamweaver CS6 ,打开 一 个 已 编辑 完成 的 页 面 。 

@ 车 要 给 某 个 对 象 添加 “弹出 消息 ”行为 , 则 应 选中 这 个 对 象 ;车 要 给 网 页 添加 “弹出 
消息 ”行为 , 则 应 选中 整个 页 面 。 这 里 选择 整个 页 面 ,为 整个 页 面 添 加 行为 。 

@ 选择 整个 二 body 二 标签 后 , 单 击 “ 行 为 ”面板 中 的 [4J 按 钮 ,在 弹出 的 下 拉 菜 单 中 选 
择 “ 弹 出 信息 ”选项 ,此 时 弹出 “弹出 信息 ”对 话 框 。 

@ 在 此 对 话 框 中 ,输入 弹出 信息 的 文本 内 容 , 如 图 8-4 所 示 。 单 击 “ 确 定 ” 按 钮 ,这 时 
在 “行为 ”面板 中 会 自动 添加 一 个 onLoad 事件 。 此 外 ,根据 实际 需要 还 可 以 在 事件 选择 
下 拉 列 表 中 选择 其 他 事件 ,如 图 8-5 所 示 。 















消息 .天 入 字 译 电子 亮 技 平 各! 











onllouseDut 
onllouse0ver 
onllouseUp 
ent 





图 8-4 “弹出 信息 ”对 话 框 图 8-5 选择 其 他 事件 


@ 执行 “文件 ”一 保存 ”命令 ,保存 当前 页 面 , 按 F12 键 预 览 网 页 。 当 浏览 器 载 人 页 
面 时 ,即刻 弹出 刚才 制作 的 对 话 框 ,如 图 8-6 所 示 。 








活动 只 为 您 的 电 况 需求 
入 《 :站 | ' 





8-6 ”应 用 “弹出 信息 ”行为 效果 
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1 
pe 


3 国 8.1.4 “打开 浏览 器 窗口 ”行为 

4 使 用 “打开 浏览 器 窗口 "行为 可 以 在 一 个 新 的 窗口 中 打开 其 他 URL， 
还 可 以 指定 新 窗口 的 属性 ,特性 和 名 称 。 这 里 以 制作 一 个 随 主 页 打开 而 
自动 打开 的 广告 窗口 页 面 为 例 , 向 读者 讲解 这 个 行为 的 使 用 方法 。 

【案例 8-2】 添加 “打开 浏览 器 窗口 "行为 。 

OO 启动 Dreamweaver CS6 ,创建 HTML 5 文档 ,在 页 面 中 创建 一 个 DIV 容器 ,并 在 
其 中 插入 一 张 图 像 ,然后 将 其 保存 为 tanchuang. html, 作 为 后 面 使 用 的 弹出 的 广告 窗口 。 

@ 再 创建 一 个 空白 页 面 ,输入 相关 内 容 , 作 为 站 点 主页 保存 为 index. html。 

@ 在 index. html 页 面 中 ,选择 整个 二 body 二 标签 中 的 内 容 , 即 选中 整个 页 面 主体 。 
然后 单 击 “行为 ”面板 中 的 [4+J 按 钮 ,在 弹出 的 下 拉 菜 单 中 选择 “打开 浏览 器 窗口 ”, 这 时 弹 
出 “打开 浏览 器 窗口 ”对话 框 。 

@ 在 “打开 浏览 器 窗口 ”对 话 框 中 单 击 “ 浏 览 ” 按 钮 ,在 弹出 的 对 话 框 中 选择 刚才 创建 
的 广告 窗口 页 面 tanchuang. html。 根 据 需 要 设置 窗口 宽度 和 高 度 ,选中 必要 属性 ,如 
图 8-7 所 示 。 

@ 设置 完成 后 单 击 “ 确 定 ” 按 钮 ,此 时 在 “行为 ”面板 中 会 自动 添加 一 个 页 面 加 载 的 
onLoad 事件 ,如 图 8-8 所 示 。 















































标 答 检 查 器 
EEC 
要 显示 的 URL |tanchuang.htnl 测 交 一 - 上 一 一 打开 浏 蜗 叶 而 吕 
舌 口 丰 度 - 窗口 高 度 : 
局 性 加 导航 工具 栏 可 单条 
地 址 工具 栏 是 要 时 使 用 未 动 条 
回 状态 栏 调整 大 小 手柄 
国 口 名 称 广告 窗口 
图 8-7 “打开 浏览 器 窗口 "对 话 框 8-8 当前 “行为 "面板 


@ 保存 当前 文档 ,使 用 浏览 器 预览 。 当 打开 主页 时 ,广告 窗口 会 在 浏览 器 窗口 随 着 
主页 的 打开 而 打开 ,如 图 8-9 所 示 。 
加 8.1.5 “改变 属性 ”行为 
: “改变 属性 ”行为 可 改变 对 象 某 个 属性 的 值 ,例如 ,DIV 容器 的 背景 
颜色 或 表单 的 某 个 动作 。 这 里 运用 ”改变 属性 ”行为 制作 鼠标 悬 停 位 置 
下 DIV 容器 变换 颜色 的 实例 。 
【案例 8-3】 添加 “改变 属性 ”行为 。 
@ 启动 Dreamweaver CS6. 创 建 HTML 5 文档 ,在 页 面 中 创建 名 为 wrapper 的 DIV 
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也 无奈 要 文档 
| D 空 | 三 








这 里 是 网 站 主页 ， 由 于 添加 了 “打开 浏览 器 窗口 ”行为 ， 所 以 当 此 页 面 被 加 
载 时 会 有 弹 窗 出 现 。 





图 8-9 “打开 浏览 器 窗口 ”行为 的 预览 效果 








容器 ,并 在 其 中 插入 一 组 DIV 容器 ,此 时 页 面 结构 如 图 8-10 所 示 。 





<body> 

<div id="wrapper"> 
<div id="box 1" class="box">box 1</div> 
<div id="box 2" class="box">box 2</div> 
<div id="box 3" class="box">box 3</div> 
<div id="box 4" class="box">box 4</div> 
<div id="box 5" class="box">box 5</div> 
<div id="box 6" class="box">box 6</div> 

</div> 

</body> 





图 8-10 案例 8-3 的 页 面 结构 


@ 在 页 面 项 部 的 head 区 域 ,编写 对 应 的 CSS 规则 ,如 图 8-11 所 示 。 保 存 当 前 页 
通过 浏览 器 预览 可 以 看 到 效果 ,如 图 8-12 所 示 。 





} 


} 





<style type="text/css"> 
#wrapper { 


-box { 


</style> 


width:321px; 
height:220px; 
padding:S5px 0 0 Spx; 
border:1px #666 dotted; 








width:100px; 
height:100px; 
border:1px #333 solid; 
float:left; 

margin:0 Spx Spx 0; 
text-align:center; 
line-height:100px; 



































8-11 案例 8-3 的 CSS 规则 图 8-12 页 面 预览 效果 
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@ 在 设计 视图 中 ,选择 名 为 box_1 的 DIV 容器 ,然后 单 击 “ 行 为 ”面板 中 的 [tJ 按钮， 
在 弹出 的 下 拉 莱 单 中 选择 “改变 属性 ”选项 ,这 时 弹出 “改变 属性 ”对 话 框 。 

@ 在 此 对 话 框 的 “元 素 类 型 "下 拉 列 表 框 中 选择 DIV 选项 ,在 “元 素 ID”" 下 拉 列 表 框 
中 选择 DIV "box_1" 选 项 ,在 “属性 "下拉 列 表 框 中 选择 backgroundColor 选项 ,在 “新 的 
值 " 文 本 框 中 输入 #FFCC33, 如 图 8-13 所 示 。 单 击 “ 确 定 ” 按 钮 ,在 “行为 ”面板 中 会 自动 
添加 一 个 onFocus 事件 。 最 后 在 事件 选择 下 拉 列 表 框 中 将 onFocus 事件 修改 为 
onMouseOver 事件 ,如 图 8-14 所 示 。 



































标签 检查 器 
[为] 村 于 
国 国 性 区 让 
Tm [EE | 
Tur 已 改变 属性 
ED | 
onDblCLi 
元 素 ID; [DY howcl” = = 站 | ee 
后 性 回 半 择 Er 
onMouseDown 
© WA 入: onousdlove 
use0al 
新 的 信 ，#FFCC33 = 








图 8-13 “改变 属性 ”对 话 框 图 8-14 改变 事件 


@ 由 于 此 时 仅 添 加 了 onMouseOver 事件 ,在 预览 时 可 以 发 现 ,虽然 鼠标 悬 停 时 box_1 
容器 的 背景 颜色 已 经 改变 ,但 光标 移出 该 容器 时 ,颜色 并 未 还 原 ,所 以 还 需要 再 添加 
onMouseOut 事件 ,如 图 8-15 所 示 。 

@ 重复 步骤 @ 一 步骤 @@ 的 操作 ,对 其 他 DIV 容器 进行 类 似 设置 。 保 存 当 前 页 面 , 通 
过 浏览 器 预览 可 以 发 现 , 当 鼠标 悬 停 在 某 个 DIV 容器 内 部 时 ,背景 颜色 进行 改变 ,而 当 光 
标 移出 DIV 容器 时 ,背景 颜色 又 恢复 为 原来 的 颜色 ,如 图 8-16 所 示 。 





一 [让 am 
































8-15 ”添加 onMouseOut 事件 图 8-16 添加 “改变 属性 ”行为 最 终 预览 效果 


最 后 需要 说 明 的 是 ,利用 行为 能 够 实现 的 某 些 效果 ,使 用 其 他 方法 同样 能 够 实现 , 例 
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如 ,本 例 中 使 用 “改变 属性 ”行为 改变 容器 背景 颜色 ,而 在 实际 工作 中 完全 可 以 使 用 CSS 
样式 中 的 伪 类 代替 。 所 以 读者 需要 观察 应 用 的 环境 ,以 及 实现 的 难 易 程度 决定 使 用 何 种 
方法 。 此 外 ,可 以 通过 官方 网 站 获取 更 多 的 行为 ,方便 设计 者 根据 实际 需要 进行 使 用 。 


8.2 Spry 构件 


Spry 构件 其 实 是 一 种 Ajax 框架 ,该 框架 是 由 各 组 织 结构 开发 的 用 于 更 好 地 进行 
Web 体验 的 JavaScript 库 。 使 用 Spry 可 以 轻松 地 制作 出 多 级 菜单 栏 、 选 项 卡 式 面 板 、 折 


8.2.1 Spry 菜单 栏 


Spry 菜单 栏 主要 用 于 网 页 中 导航 效果 的 实现 , 它 提供 了 横向 和 
向 两 种 布局 显示 方式 。 由 于 默认 风格 的 Spry 菜单 栏 外 观 一 般 不 能 满足 
实际 需要 ,因此 通常 需要 配合 CSS 样式 对 其 进行 美化 。 

【案例 8-4】 Spry 菜单 栏 。 

@ 启动 Dreamweaver CS6, 创 建 空白 HTML 5 文档 ,将 光标 定位 在 需要 插入 Spry 
菜单 栏 的 位 置 。 

@ 在 “插入 ”面板 的 Spry 类 别 中 单 击 “Spry 菜单 栏 ” 
按钮 ,此 时 弹出 如 图 8-17 所 示 的 对 话 框 。 根 据 实际 需要 Ee 
选择 菜单 栏 的 布局 方向 ,这 里 选中 “水 平 " 单 选 按钮 。 

@ 在 软件 设计 视图 中 ,选择 *Spry 菜单 栏 "左上 角 | 雇 要 
的 蓝 色 标签 , 此 时 属性 面板 显示 相关 参数 设置 ,如 
图 8-18 所 示 。 在 该 属性 面板 中 ,顶级 菜单 和 下 级 菜单 中 
的 项 目 都 可 以 通过 单 击 贺 或 加 按钮 进行 添加 或 删除 ,还 
可 以 通过 | 和 国 j 按 钮 调整 顺序 。 

















问 汪 














图 8-17 “Spry 菜单 栏 " 对 话 框 


















































图 8-18 设置 “Spry 菜单 栏 ?属性 


插入 Spry 菜单 后 ,在 CSS 面板 中 可 以 看 到 软件 自动 添加 了 许多 CSS 规则 ,选择 某 些 
规则 进行 修改 , 即 可 达到 改变 菜单 外 观 的 目的 。 
@ 保存 当前 页 面 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 8-19 所 示 。 


8.2.2 Spry 选项 卡 式 面 板 
选项 卡 式 面 板 是 一 组 面板 的 集合 , 它 可 以 将 更 多 的 内 容 存 储 到 紧凑 
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而 其 他 面板 的 内 容 将 会 被 隐藏 ,图 8-20 所 示 是 常见 的 选项 卡 式 面板 。 下 面 以 实例 的 形式 
讲解 创建 Spry 选项 卡 式 面板 的 整个 过 程 。 


站 spn 到 
¢2C[4 








学 院 概况 。 > 车 训 S 革 时 了 机 构 设 置 。 ~ 师资 队伍 


公告 通知 
CEE | 手机 安全 充值 | 机 票 | 点 卡 | 
E;/.…/8-4 Spry 茶 单 栏 .html 请 输入 手机 号 || 100 元 充值 


图 8-19 Spry 菜单 栏 的 预览 效果 图 8-20 选项 卡 式 面板 























【案例 8-5】 Spry 选项 卡 式 面板 。 

@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 ,将 光标 定位 在 需要 插入 Spry 
选项 卡 式 面板 的 位 置 。 

@ 在 “插入 ”面板 的 Spry 类 别 中 单 击 “Spry 选项 卡 式 面板 ”按钮 , 即 可 完成 插入 。 

@ 在 设计 视图 中 ,可 以 直接 修改 选项 卡 内 部 的 文字 内 容 。 此 外 ,选择 “Spry 选项 卡 
式 面板 ?左上 角 的 蓝 色 标 签 ,属性 面板 即刻 显示 相关 参数 设置 ,如 图 8-21 所 示 。 在 该 属性 
面板 中 , 单 击 画 或 园 按 钮 可 以 添加 或 删除 选项 卡 的 数量 。 














属性 

| 选项 卡 式 面板 
habbedpanelsl 
BE Wideet 




















图 8-21 设置 Spry 选项 卡 式 面板 的 属性 


当 Spry 选项 卡 式 面板 插入 网 页 内 部 时 可 以 发 现 , 软 件 自动 创建 并 连接 了 外 部 CSS 
文档 和 JavaScript 文档 ,并 且 有 默认 风格 的 外 观 样式 作用 在 选项 卡 式 面板 中 。 

@ 根据 实际 需要 ,向 选项 卡 式 面板 中 添加 必要 的 文字 内 容 。 为 了 进一步 美化 外 观 ， 
这 里 简单 编写 了 CSS 样式 ,如 图 8-22 所 示 。 

Q@ 保存 当前 页 面 , 通 过 浏览 器 预览 即 可 看 到 效果 ,如 图 8-23 所 示 。 


8.2.3 Spry 折 释 式 构件 


Spry 折 和 三 式 构件 同样 是 一 组 面板 ,用 来 将 内 容 存储 到 紧凑 的 空间 中 。 单 击 面板 
上 的 标签 即 可 展开 或 收缩 折 革 面板 中 的 内 容 。 在 Spry 折 秋 式 构件 中 ,每 次 只 能 有 一 
个 内 容 的 面板 处 于 打开 状态 。 下 面 以 实例 的 形式 讲解 创建 Spry 折 释 式 构件 的 整个 
过 程 。 
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<style type="text/css"> 


wi! 
margin:0; 
padding:0; 

















} 
-TabbedPanels { 
width:250px; 
height:150px; 
} 
-TabbedPanelsContent { 
font-size:12px; 
} 
.TabbedPanelsContent ul { 
padding:10px Spx Spx 20pxj| : 和 
} 
</style> 


图 8-22 案例 8-5 的 CSS 规则 图 8-23 ”Spry 选项 卡 式 面板 的 预览 效果 








【案例 8-6】 Spry 折 和 又 式 构件 。 

@ 启动 Dreamweaver CS6, 创 建 空白 HTML 5 文档 ,将 光标 定位 在 需要 插入 Spry 
折 释 式 构件 的 位 置 。 

@ 在 “插入 "面板 的 Spry 类 别 中 单 击 “Spry 折 释 式 ” 按 钮 , 即 可 完成 插入 。 

@ 在 设计 视图 中 ,可 以 直接 修改 内 部 的 文字 内 容 。 此 外 ,选择 “Spry 折 释 式 ? 左 上 角 
的 蓝 色 标签 ,属性 面板 即刻 显示 相关 参数 设置 ,如 图 8-24 所 示 。 在 该 属性 面板 中 , 单 击 压 
或 车 按 钮 可 以 添加 或 删除 选项 卡 的 数量 。 

@ 根据 实际 需要 ,向 Spry 折 释 式 构件 中 添加 必要 的 文字 内 容 。 保 存 当 前 页 面 , 通 过 
浏览 器 预览 即 可 看 到 效果 ,如 图 8-25 所 示 。 


。 购 华晨 宝马 3 系 可 享 
。 购 华晨 宝 





并 、 购 华 是 宝马 3 条 
Sccordion! | 。 购 华晨 宝马 3 系 忆 享 优惠 6 是 元 
目 宇 义 此 ideat 











图 8-24 设置 Spry 折 丢 式 构件 的 属性 8-25 ”Spry 折 释 式 构 件 的 预览 效果 


8.3 过 程 指导 一 一 精品 课程 网 站 的 设计 与 制作 


本 节 以 设计 制作 大 学 精品 课程 网 站 为 目标 ,巩固 练习 有 关 布 局 的 相关 知识 。 通 过 本 
节 的 练习 ,读者 能 够 掌握 页 面 布局 的 基本 处 理 方法 。 
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8.3.1 过 程 分 析 


本 实例 的 主要 任务 是 设计 制作 大 学 精品 课程 网 站 。 拿 到 页 面 设计 稿 时 ,不 要 盲目 切 
图 ,而 是 要 首先 弄 清 网 页 的 布局 方式 ,分 析 一 下 版 式 结构 , 待 整体 页 面 搭建 有 明确 规划 后 ， 
再 根据 成 熟 的 规划 进行 切 图 。 

1. 主页 面 布局 规划 

通过 成 熟 的 构思 与 设计 ,精品 课程 网 站 的 主页 最 终 效果 如 图 8-26 所 示 , 布 局 如 
图 8-27 所 示 。 










代 字 洗 科 技 大 学 
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图 8-26 ”精品 课程 网 站 主页 最 终 效果 图 (1) 


2. 子 页 面 布局 
精品 课程 网 站 的 子 页 面 采用 T 形 布局 .最 终 效果 如 图 8-28 所 示 , 布 局 如 图 8-29 
所 示 。 


8.3.2 步骤 详解 


1. 前 期 准备 工作 

(1) 启动 Dreamweaver CS6 ,在 菜单 栏 中 执行 “站 点 ”>“ 新 建站 点 ”命令 ,在 弹出 的 对 
话 框 中 设置 站 点 名 称 及 路 径 。 

(2) 在 站 点 中 创建 images 和 style 两 个 文件 夹 。 
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main_lefl main_mid main_right 
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图 8-27 精品 课程 网 站 主页 布局 示意 图 (1) 
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8-28 ”了 于 页 效果 图 
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图 8-29 子 页 布局 示意 图 


(3) 在 Dreamweaver CS6 的 菜单 栏 中 执行 “文件 ”一 “新 建 " 命 令 , 创 建 一 个 空白 文档 ， 
并 命名 为 index. html。 

(4) 创建 一 个 外 部 CSS 样式 表 文件 ,将 这 个 CSS 文件 保存 在 站 点 的 style 文件 夹 下 ， 
并 命名 为 div. css。 

(5) 在 Dreamweaver CS6 的 “CSS 样式 "面板 中 单 击 “ 附 加 样式 表 ” 按 钮 磋 , 弹 出 “ 链 
接 外 部 样式 表 ” 对 话 框 ,将 之 前 创建 的 div. css 外 部 样式 文件 链接 到 index. html 页 面 中 。 


2. 开始 制作 主页 

1) 页 面 顶部 的 制作 

(1) 切换 到 div. css 文件 中 ,分 别 创建 通配符 选择 符 的 CSS 规则 过 body 之 标签 的 
CSS 规则 和 伪 类 的 相应 规则 ,如 图 8-30 和 图 8-31 所 示 。 

(2) 切换 到 设计 视图 ,在 “插入 ”面板 的 “常用 ”类 别 中 单 击 “ 插 入 Div 标签 ”按钮 国 , 弹 
出 “插入 Div 标签 "对话 框 。 在 “插入 ”下 拉 列 表 框 中 选择 “在 插入 点 ”选项 ,在 ID 文本 框 中 
输入 wrap, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 页 面 中 插入 wrap 容器 。 切 换 到 div. css 文件 中 ， 
创建 一 个 名 为 # wrap 的 CSS 规则 ,如 图 8-32 所 示 。 切 换 到 设计 视图 ,页 面 效果 如 图 8-33 
所 示 。 

(3) 切换 到 设计 视图 ,将 光标 定位 在 wrap 容器 中 .删除 多 余 的 文字 , 单 击 “ 插 入 ”面板 





加 





{ 


margin:Opx; 
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padding:0O0px; a:link, a:visited { 
border:Opx; color:#333; 
text-decoration: none; 
body { font-weight: normal; 
font-family: "宋体 "; } 
font-size:13px; a:hover, a:act 
color:#000; Color: #FFF; 
background-color:#FFF; text-decoration: underline; 
} 
图 8-30 ”通配符 选择 符 和 二 body 二 标签 的 CSS 规则 图 8-31 伪 类 的 CSS 规则 
wrap 1 
width:984px; 
height:850px; 
background:url(../images/bg_01.jpg) no-repeat; 
margin:0 auto; 
} 
图 8-32 ”名 为 # wrap 的 CSS 规则 
ER "veep" 的 机 各 
< 哈 
全. 
计算 机 网 络 工程 
精品 归程 她 设 时 党 漳 























图 8-33 ”页面 背景 效果 


中 的 “插入 Div 标签 ”按钮 国 , 弹 出 “插入 Div 标签 ”对 话 框 ,在 “插入 ”下 拉 列 表 框 中 选择 
“在 开始 标签 之 后 ”选项 ,并 在 其 后 方 下 拉 列 表 框 中 选择 二 div id 一 "wrap" 盖 选项 ,在 ID 文 


本 框 中 输入 top, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 wrap 容器 
内 部 插入 top 容器 。 切 换 到 div. css 文件 中 ,创建 一 个 名 
为 #top 的 CSS 规则 ,如 图 8-34 所 示 。 切 换 到 设计 视图 ， 
将 top 容器 中 多 余 的 文字 删 去 ,并 输入 “ 设 为 首页 加 入 收 
藏 "文字 内 容 , 页 面 效果 如 图 8-35 所 示 。 

(4) 在 代码 视图 中 ,修改 二 div id 一 "top" 过 标签 的 代 


#top { 
float:right; 
width:150px; 
font-family: "黑体 "; 
text-align:right; 
margin-top:10px; 
margin-bottom:20px; 
padding-right:20px; 











码 , 如 图 8-36 所 示 。 再 次 切换 回 div. css 文件 中 ,创建 一 


8-34 名 为 #top 的 CSS 规则 
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</a><span>1</span><a href="#"> 加 入 收 
</a> </div> 


图 8-35 在 #top 内 输入 文字 图 8-36 ”修改 标签 内 容 








<div id-"top"> <a | 
藏 








个 名 为 #top span 的 CSS 规则 ,如 图 8-37 所 示 , 返 回 设 计 视 图 ,页 面 效 果 如 图 8-38 
所 示 。 

(5) 切换 到 设计 视图 ,将 光标 定位 在 wrap 容器 中 , 单 击 “ 插 入 ”面板 中 的 “插入 Div 标 
签 ”按钮 国 , 弹 出 “插入 Div 标签 ”对 话 框 。 在 “插入 ”下 拉 列 表 框 中 选择 “在 标签 之 后 ” 选 
项 ,并 在 其 后 方 下 拉 列 表 框 中 选择 二 div id="top" 盖 选项 ,在 ID 文本 框 中 输入 nav, 最 后 
单 击 “ 确 定 ” 按 钮 , 即 可 在 top 容器 后 面 插入 nav 容器 。 切 换 到 div. css 文件 中 ,创建 一 个 
名 为 #nav 的 CSS 规则 ,如 图 8-39 所 示 。 


top span { width:984px; 


float:left; 
overflow:hidden; 





} 


图 8-37 名 为 #top span 的 CSS 规则 图 8-38 #top 最 终 效果 图 8-39 名 为 # nav 的 CSS 规则 


(6) 返回 设计 视图 ,将 nav 层 中 多 余 的 文字 删 去 , 单 击 “ 插 入 ”面板 中 的 “插入 Div 标 
签 ” 按 钮 国 , 弹 出 “插入 Div 标签 ”对 话 框 ,在 “插入 "下 拉 列 表 框 中 选择 “在 标签 之 后 " 选 
项 ,并 在 其 后 方 下 拉 列 表 框 中 选择 二 div id="nav" 二 选项 ,在 ID 文本 框 中 输入 nav_logo， 
最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 nav 容器 内 部 插入 nav_logo 容器 。 切 换 到 div. css 文件 中 ， 
创建 一 个 名 为 # nav_logo 的 CSS 规则 ,如 图 8-40 所 示 。 返 回 设计 视图 ,页 面 效 果 如 
图 8-41 所 示 。 


Tav-T595 T 
float:left; 
width:280px; 


height :70px; 

background: 
ur1(../images/l0ogo.gif) no-repeat; 

margin-left:15px; 


其 字 主 科技 大 学 


YUZE UNVERSITY OF SCIENCE AND TECHNOLOGY: 





} 





图 8-40 名 为 #nav_logo 的 CSS 规则 图 8-41 插入 logo 的 效果 


(7) 切换 到 设计 视图 ,将 光标 定位 在 nav 容器 中 , 单 击 “插入 ”面板 中 的 “插入 Div 标 
签 ”按钮 国 , 弹 出 “插入 Div 标签 ?对话 框 ,在 “插入 ”下拉 列 表 框 中 选择 “在 标签 之 后 ” 选 
项 ,并 在 其 后 方 下 拉 列 表 框 中 选择 二 div id="nav_logo" 二 选项 ,在 ID 文本 框 中 输入 nav_ 
menu, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 nav_logo 容器 后 面 插入 nav_menu 容器 。 切换 到 
div. ess 文件 中 ,创建 一 个 名 为 # nav_menu 的 CSS [| 
规则 ,如 图 8-42 所 示 。 切 换 回 设计 页 面 ,将 nav- sn Er 
menu 层 中 多 余 的 文字 删 去 ,在 其 内 部 插入 名 为 # Float:left; 


nav_menu_head 的 容器 ,并 创建 相应 的 CSS 规则 ， 
如 图 8-43 所 示 。 图 8-42 名 为 #nav_menu 的 CSS 规则 











第 8 章 行为 与 Spry 构件 





nav menu head 1 
float:1left; 
width:20px; 
height:36px; 
background:url(../images/nav_menu head.gif)| 
no-repeat; 








} 





图 8-43 名 为 #nav_menu_head 的 CSS 规则 


(8) 用 同样 的 制作 方法 ,在 # nav_menu_head 后 部 插入 名 为 # nav_menu_mid 的 容 
器 ,并 创建 相应 的 CSS 规则 ,如 图 8-44 所 示 。 切 换 到 设计 视图 ,将 nav_menu_mid 容器 中 
多 余 的 文字 删 去 ,插入 一 组 无 序列 表 , 并 输入 相应 的 文字 ,此 时 当前 代码 结构 如 图 8-45 
所 示 。 


av menu mid 1 
float:left; 
width: 580px; 
height:36px; 


background:url(../images/nav_bg.jpg)| 
repeat—x; 
} 





图 8-44 名 为 #nav_menu_mid 的 CSS 规则 


(9) 代码 修改 完成 后 ,切换 到 div. css 文件 中 ,创建 CSS 规则 ,如 图 8-46 所 示 。 返 回 
设计 视图 ,导航 菜单 的 效果 如 图 8-47 所 示 。 





lnav menu mid ul { 
list-style:none; 
margin: Opx; 
div id="nav menu mid"™> padding: Opx; 
<ul> } 
<li><a ="#”target="_self"> 课 程 首 页 </a></1i> nav menu mid li { 
<li><a href="#"” target="”_self"> 课 程 设置 </a></1i> float:left; 
<li><a e ”target="_self"> 教 学 内 容 </a></1i> margin-top:10px; 
<li><a elf "> 方法 手段 </a></1i> padding-left:11ipx; 
<li><a hre elf "> 教学 队伍 </a></1i> } 
<1i><a elf "> 实践 条 件 </a></1i> Enav _ menu mid a { 
<li><a e elf "> 教学 效果 </ a></1i> font-family: "黑体 "; 
_self"> 工 学 结合 </a></1i> font-size:15px; 
Color:#FFF; 











图 8-45 ”修改 nav_menu_mid 层 中 的 代码 图 8-46 创建 相应 的 CSS 规则 





8-47 ”导航 菜单 应 用 样式 后 的 效果 


(10) 切换 到 设计 视图 , 单 击 “ 插 入 ”面板 中 的 “插入 Div 标签 ”按钮 国 , 弹 出 “插入 Div 
标签 ”对 话 框 ,在 “插入 ”下 拉 列 表 框 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 下 拉 列 表 框 中 
选择 一 div id 一 "nav_menu_mid" 过 选项 ,在 ID 文本 框 中 输入 nav_menu_tail, 最 后 单 击 
“确定 ”按钮 , 即 可 在 nav_menu_mid 容器 后 面 插入 nav_menu_tail 容器 。 切 换 到 div. css 
文件 中 ,创建 一 个 名 为 #nav_menu_tail 的 CSS 规则 ,如 图 8-48 所 示 。 返 回 设计 视图 , 删 
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A 除 其 中 的 文字 , 即 可 看 到 页 面 效 果 , 如 图 8-49 所 示 。 


pe 





nav menu tail { 
float:left; 
width:20px; 
height:36px; 
background: url(../images/nav menu tail.gif)| 
no-repeat; 
} 











图 8-48 名 为 #nav_menu_tail 的 CSS 规则 图 8-49 插入 背景 图 像 后 的 效果 


2) 页 面 中 部 的 制作 

(1) 切换 到 设计 视图 , 单 击 “ 插 入 "面板 中 的 “插入 Div 标签 ”按钮 国 , 弹 出 “插入 Div 
标签 ”对 话 框 ,在 “插入 ”下拉 列表 框 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 下 拉 列 表 框 中 
选择 二 div id="nav" 过 选项 ,在 ID 文本 框 中 输入 main, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 nav 
容器 后 面 插入 main 容器 。 切 换 到 div. css 文件 中 ,创建 一 个 名 为 并 main 的 CSS 规则 ,如 
图 8-50 所 示 。 

(2) 切换 到 设计 视图 ,删除 多 余 的 文字 , 单 击 “ 插 入 ”面板 中 的 “插入 Div 标签 ”按钮 
国 , 弹 出 “插入 Div 标签 ”对话 框 ,在 “插入 ”下 拉 列 表 框 中 选择 “在 开始 标签 之 后 ”选项 ,并 
在 其 后 方 下 拉 列 表 框 中 选择 div id 一 "main" 过 选项 ,在 ID 文本 框 中 输入 main_left, 最 
后 单 击 “确定 ”按钮 , 即 可 在 main 容器 内 部 插入 main_left 容器 。 切 换 到 div. css 文件 中 ， 
创建 一 个 名 为 #main_left 的 CSS 规则 ,如 图 8-51 所 示 。 


#main { 
float:left; 
width: 984px; 


main left { 
float:left; 
width:320px; 


height:280px; 
margin-top:36B8px; 


height:260px; 
margin-left:10px; 





图 8-50 ”名 为 # main 的 CSS 规则 图 8-51 名 为 # main_left 的 CSS 规则 


(3) 用 同样 的 制作 方法 ,在 main_left 内 部 插入 名 为 main_left_top 的 容器 ,并 创建 相 
应 的 CSS 规则 ,如 图 8-52 所 示 。 返 回 设计 视图 ,删除 其 中 的 文字 , 即 可 看 到 页 面 效 果 , 如 
图 8-53 所 示 。 





和 main lerft top 1 
background: 

url(. ./images/main left_top_bg.jpg) no-repeat; 
height:35px; 





} 








8-52 名 为 # main_left_top 的 CSS 规则 8-53 ”为 # main_left_top 增加 顶部 背景 


(4) 根据 规划 ,main_left 区 域 是 显示 新 闻 列 表 的 区 域 , 这 里 使 用 过 ul>、<1i 之 和 
去 span>3 个 标签 实现 新 闻 列表 的 外 观 样式 ,具体 的 内 容 将 在 后 续 章 节 中 陆续 介绍 ,这 里 
读者 仅 需 体验 制作 过 程 即 可 。 

切换 到 代码 视图 ,将 光标 定位 在 二 div id 二 "main_left_top" 记 的 后 面 ,输入 标题 ,新 闻 
简要 以 及 发 布 日 期 ,并 用 不 同 的 标签 将 其 包围 ,此 时 结构 代码 如 图 8-54 所 示 。 
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<aiv id="main_left_top"> 


<h3>NEWS</h3> 


<ul class="news_ list"> 


<1i><a href="#">2011 年 网 络 思科 认证 报名 通知 </a> 







<span>2011-1-12</span></1i>| 








<li><a ">2011 年 网 络 思 科 认 证 报名 通知 </a> <span>2011-1-12</span></1i>| 
<li><a ">2011 年 网 络 思科 认证 报名 通知 </a> <span>2011-1-12</span></1i> 
<li><a ">2011 年 网 络 思科 认证 报名 通知 </a> <span>2011-1-12</span></1i> 
<1li><a href="#">2011 年 网 络 思科 认证 报名 通知 </a> <span>2011-1-12</span></1i> 
</ul> 
</aiv> 





图 8-54 新 闻 列表 的 结构 代码 


(5) 切换 到 div. css 文件 中 ,为 news_list 类 .<h3 二 一 li 一 、 一 a 之 和 二 span> 标 签 编 
写 相 应 的 CSS 规则 ,如 图 8-55 所 示 。 返 回 设计 视图 , 即 可 看 到 页 面 效果 ,如 图 8-56 所 示 。 

(6) 切换 到 设计 视图 , 单 击 “ 插 入 ”面板 中 的 “插入 Div 标签 ”按钮 国 , 弹 出 “插入 Div 
标签 ”对 话 框 ,在 “插入 ”下拉 列表 框 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 下 拉 列 表 框 中 
选择 一 div id 二 "main_left_top" 记 选项 ,在 ID 文本 框 中 输入 main_left_bottom, 最 后 单 击 
“确定 ”按钮 , 即 可 在 main_left_top 容器 后 面 插入 main_left_bottom 容器 。 切 换 到 
div. css 文件 中 ,创建 一 个 名 为 ## main_left_bottom 的 CSS 规则 ,如 图 8-57 所 示 。 





ain Te 
height: 40px; 
font-family:Arial, Helvetica,| 
sans-serif; 
font-size: 16px; 
font-weight:bold; 
color: #105cb6; 
padding-left:20px; 
padding-top: 10px; 





) 
.news_list * { 
margin: 0; 
padding:0; 
list-style:none; 
text-decoration ; none; 






2011 年 网 络 思科 认证 报名 通知 
2011 年 网 络 思科 认证 报名 通知 
2011 年 网 络 思科 认证 报名 通知 
2011 年 网 络 思科 认证 报名 通知 。 2011 : 
2011 年 网 络 思 科 认证 报名 通知 。 2011-1-12 | 





s_list li { 

float: left; 
padding-left:20px; 
width:300px; 
height :20px; 
overflow: hidden; 

















list li al 
width:200px; 图 8-56 ”应 用 规则 后 新 闻 列表 的 效果 
float:1left; 

) 

.news_list 1i a:ho 
text-decoration:none; 





er { 
#main left bottom { 


color:#F32600; 

} 

.news_ list 1i span { 
float:left; 
width:75px; 
color:#999999; 








8-55 ”定义 新 闻 列 表 所 用 的 CSS 规则 


float:left; 
width:310px; 
height:80px; 


margin-top:20px; 
margin-left:Spx; 
overflow:hidden; 





8-57 名 为 并 main_left_bottom 的 CSS 规则 
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(7) 切换 到 设计 视图 ,删除 多 余 的 文字 ,将 图 : = 
像 images/main_left_bottom_bg. gif 插入 main | : 
left_bottom 层 中 ,并 使 用 热点 工具 绘制 热点 区 
域 ,如 图 8-58 所 示 。 

(8) 切换 到 设计 视图 , 单 击 * 插 入 ?面板 中 的 
“插入 Div 标签 ”按钮 国 , 弹 出 “插入 Div 标签 ”对 
话 框 ,在 “插入 ”下拉 列表 框 中 选择 “在 标签 之 后 ” 选 
项 ,并 在 其 后 方 下 拉 列 表 框 中 选择 二 div id 一 
"main_left" 过 选项 ,在 ID 文本 框 中 输入 main_ 
mid, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 main_left 容器 
后 面 插入 main_mid 容器 。 

用 同样 的 制作 方法 ,在 main_mid 层 内 部 插入 main_mid_top 层 ,切换 到 div. css 文件 
中 ,分 别 创建 名 为 #main_mid 和 直 main_mid_top 的 CSS 规则 ,如 图 8-59 所 示 。 返 回 设 
计 视 图 ,删除 多 余 的 文字 ,将 “flash/ 课 程 特色 . swf”Flash 影片 文件 插入 main_mid_top 层 
中 ,页 面 效 果 如 图 8-60 所 示 。 













2011 年 网 络 思科 认证 报名 通知 
2011 年 网 络 思科 认证 报名 通知 
2011 年 网 络 思科 认证 报名 通知 
2011 年 网 络 思科 认证 报名 通知 
2011 年 网 络 思科 认证 报名 通知 。 2011-1-12 
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图 8-58 绘制 热点 区 域 


Fmain mid 1 
float:left; 
margin-left:Spx; 


} 








#main mid top { 一 ep 四 
WEaths3805x， 课程 簿 色 1 
ee : ee 人 
margin-top:20px; 境 ， 形成 岗位 化 教学 过 程 。 
margin-bottom:20px; 人 J 

图 8-59 创建 CSS 规则 图 8-60 插入 Flash 影片 文件 后 的 效果 


(9) 单 击 “ 插 入 ”面板 中 的 “插入 Div 标签 ”按钮 国 ,弹出 “插入 Div 标签 ”对话 框 ,在 
“插入 ”下 拉 列 表 框 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 下 拉 列 表 框 中 选择 二 div id 一 
"main_mid_top" 过 选项 ,在 ID 文本 框 中 输入 main_mid_bottom, 最 后 单 击 “ 确 定 ” 按 钮 , 即 
可 在 main_mid_top 容器 后 面 插入 main_mid_bottom 容器 。 切 换 到 div. css 文件 中 ,创建 一 
个 名 为 # main_mid_bottom 的 CSS 规则 ,如 图 8-61 所 示 。 

返回 设计 视图 ,删除 多 余 的 文字 ,分 别 插入 两 张 装饰 性 图 片 , 并 输入 相应 的 文字 , 如 
图 8-62 所 示 。 





人 





| 师 生 交流 COIOIUNICATION 课程 申报 表 
DARATION POR eee J 
8-61 名 为 # main_mid_bottom 的 CSS 规则 图 8-62 插入 图 片 并 输入 文字 


(10) 从 图 中 可 以 看 出 ,图 片 和 文字 并 不 能 按照 规划 的 那样 显示 ,下 面 主要 针对 图 片 
和 文字 进行 外 观 的 美化 。 
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切换 到 代码 视图 ,在 二 div id 一 "main_mid_bottom" 之 标签 内 部 ,修改 相应 的 标签 ,如 


图 8-63 所 示 。 





<al> 


</ul> 
</div> 





< Id="main mid bottom™> 


<li><a hr 
流 </strong>zsFanycoy 
<li><a href: 


"#"><img src="images/main mid bottom 01.gif” width="60” height="85” /><strong> 师 生 文 | 








="#"><img src-"images/main mid bottom 02.gif” width="60”height="65”/><strong> 课 程 申 
服 表 </strong><span>DECTARnmION FORM</span></a></1i> 


TCRATION</span></a></1i> 








图 8-63 ”修改 main_mid_bottom 内 部 标签 


(11) 切换 到 div. css 文件 中 ,编写 相应 的 CSS 规则 ,如 图 8-64 所 示 。 返 回 设计 视图 ， 
即 可 看 到 页 面 效 果 , 如 图 8-65 所 示 。 


} 


} 


} 


} 





} 


#main mid bottom ul li { 


#main mid bottom ul li a { 


#main mid _ bottom ul li a strong { 


#main mid bottom span { 


#main mid bottom a:hover strong { 


float:left; 
margin-left:15px; 
display:inline; 


display:block; 
width:150px; 
height:100px; 
text-decoration:none; 
text-align:center; 
overflow:hidden; 


font-size:16px; 
font-family: "黑体 "; 
line-height:15px; 
font-weight:100; 
Color:#333; 
overflow:hidden; 





display:block; 

font-family:"Arial Black", Gadget, sans-serif; 
font-size:10px; 

text-align:left; 

color:#999; 


Color:#39F; 





8-64 编写 相应 的 CSS 规则 


(12) 切换 到 设计 视图 , 单 击 “ 插 入 ”面板 中 的 “插入 Div 标签 ”按钮 国 ,弹出 “插入 Div 
标签 ”对 话 框 ,在 “插入 ”下拉 列 表 框 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 下 拉 列 表 框 中 
选择 二 div id 一 "main_mid" 之 选项 ,在 ID 文本 框 中 输入 main_right, 最 后 单 击 “ 确 定 ” 按 
钮 , 即 可 在 main_mid 容器 后 面 插入 main_right 容器 。 切 换 到 div. css 文件 中 ,创建 名 为 
main_right 的 CSS 规则 ,如 图 8-66 所 示 。 

返回 设计 视图 ,删除 多 余 的 文字 ,输入 相关 文字 ,并 为 标题 添加 环绕 标签 二 h3 过 ,再 
次 切换 到 div. css 文件 中 ,创建 h3、p 和 伪 类 的 相关 CSS 规则 ,如 图 8-67 所 示 。 返 回 设计 
视图 ,此 时 页 面 效果 如 图 8-68 所 示 。 





、\ 
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课程 稚 色 | 
人 1 企业 参与 课程 软 硬 建设 和 课堂 教 【下 
学 ， 依 据 项 目 整个 流程 模拟 职场 环 
境 ， 形 成 岗位 化 教学 过 程 . 


J Fain right 1 
float:left; 
width:275px; 


wo height:260px; 
be | margin-left:Spx; 























background: 
师 生 交流 课程 申报 表 ur1(../images/main right_bg.jpg) no-repeat; 
CoMMUNICATION DECLARATION FORM } 
图 8-65 对 图 片 和 文字 应 用 样式 后 的 效果 图 8-66 ”名 为 #main_right 的 CSS 规则 

main right h3 1 
height :20px; 
font-family: "黑体 "; 
font-size:15px; 
color: #105cb6; 
padding-left:20px; 课程 简介 
padding-top:15px; 《计算 机 网 络 工程 } 课程 是 计算 机 网 络 

} 考 业 的 职业 技术 课 ， 是 网 络 工程 、 网 络 系统 

#main right P { 集成 和 网 络 系统 管理 人 员 必 修 的 课程 之 一 。 
text-indent :2em; 该 课程 通过 对 实际 工作 过 程 的 项 目 学 习 ， 使 
line-height:18px; 学 生 能 够 对 中 小 型 局 城 网 进行 总 体 规 划 和 设 
padding-left:13px; 计 ， 能 够 根据 设计 进行 设备 选 型 ， 能 够 按照 
padding-right:13px; 网 络 总 体 设计 的 要 求 进行 综合 布线 系统 的 设 

} 计 、 施 工 、 管 理 和 测试 验收 。 nh, 

#main right a:hover { 详细 内 容 ... -她 
text-decoration:none; e、 | 
color:#F32600; < we 4 

} 

图 8-67 创建 标题 和 段落 的 CSS 规则 图 8-68 标题 和 段落 应 用 样式 后 的 效果 


3) 页 面 底部 的 制作 

(1) 切换 到 设计 视图 , 单 击 “ 插 入 "面板 中 的 “插入 Div 标签 ”按钮 国 , 弹 出 “插入 Div 
标签 ”对 话 框 ,在 “插入 "下 拉 列 表 框 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 下 拉 列 表 框 中 
选择 二 div id 二 "main" 二 选项 ,在 ID 文本 框 中 输入 footer, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 
main 容器 后 面 插入 footer 容器 。 切 换 到 div. css 文件 中 ,创建 名 为 #footer 的 CSS 规则 ， 
如 图 8-69 所 示 。 






#footer { 
clear:both; 
height:65px; 
margin:0; 
padding-top:10px; 
background:url1(../images/footer bg.gif) repeat-x; 








8-69 名 为 #footer 的 CSS 规则 


(2) 返回 设计 视图 ,删除 多 余 的 文字 , 单 击 * 插 和 人 ?面板 中 的 “插入 Div 标签 按钮 国 ， 
在 footer 容器 内 部 插入 footer_logo 容器 。 切 换 到 div. css 文件 中 ,创建 名 为 # footer_ 
logo 的 CSS 规则 ,如 图 8-70 所 示 。 

(3) 用 同样 的 制作 方法 ,在 #footer_logo 后 部 插入 名 为 #footer_mid 的 容器 ,并 创建 
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相应 的 CSS 规则 ,如 图 8-71 所 示 。 





#footer logo { 
float:left; 
width:250px; 
height:60px; 
background:url1(../images/footer logo.gif) no-repeat; 


#footer mid 1 
float:left; 
width: 520px; 


height: 60px; 











图 8-70 ”名 为 #footer_logo 的 CSS 规则 图 8-71 名 为 #footer_mid 
的 CSS 规则 


返回 设计 视图 ,删除 多 余 的 文字 ,输入 版 权 信息 等 内 容 。 切 换 到 代码 视图 ,在 二 div id 一 
"footer_mid" 之 标签 内 部 修改 相应 的 标签 ,如 图 8-72 所 示 。 


<div id="footer mid"> 
<dl> 

<dd> 地 址 ,河南 省 郑州 市 东风 路 西 段 宇 泽 科技 大 学 计算 机 学 院 邮编 ，450000 </dd> 

<dd>Email，wufeng11216126.com</dd> 

<dt>Copyright @All Rights Reserved 宇 泽 网 络 </at> 


</dl> 





</div> 





8-72 ”修改 footer_mid 内 部 标签 


(4) 切换 到 div. css 文件 中 ,创建 名 为 # footer_mid dl 的 CSS 规则 ,如 图 8-73 所 示 。 
返回 设计 视图 ,页 面 效 果 如 图 8-74 所 示 。 


FEcoter mid dl 1 
font-family:", 
font-size: 
color:#666; 





text-align:center; 
padding-left:15px; 


地 址 : 河南 省 郑州 市 东风 路 西 段 字 泽 科 技 大 学 计算 机 学 院 邮编 : 450000 
Emai1: wufeng11218126. com i 





Peing top: 1 Copyright GAN Rights ResServed 字 泽 网 络 科技 
图 8-73 名 为 #footer_mid dl 图 8-74  #footer_mid 的 效果 
的 CSS 规则 


(5) 在 footer_mid 后 部 插入 名 为 footer_behind 的 容器 ,删除 多 余 的 文字 ,输入 “友情 
链接 "文字 内 容 , 并 插入 跳 转 菜 单 类 型 的 表单 。 切 换 到 div. css 文件 中 ,创建 名 为 # footer 
_behind 的 CSS 规则 ,如 图 8-75 所 示 。 返 回 设计 视图 ,页 面 效 果 如 图 8-76 所 示 。 


FEooter behind 1 
float:left; 
width:180px; 
height :40px; 
line-height:20px; 
font-family: "黑体 "; 
font-size:13px; 
color:#666; 
padding-top:10px; 








友情 锋 
国家 精品 课程 资源 网 国 


8-75 ”名 为 #footer_behind 的 CSS 规则 8-76 ”为 跳 转 菜单 应 用 样式 
后 的 效果 
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3. 精品 课程 子 页 的 制作 过 程 

精品 课程 网 站 子 页 面 与 主页 有 一 定 相似 之 处 ,对 于 子 页 面 顶部 区 域 的 制作 过 程 这 里 
不 再 缆 述 ,这 里 仅 对 侧 边栏 以 及 右 侧 内 容 显示 区 域 布局 的 实现 加 以 讲解 。 

(1) 根据 前 面 所 讲 内 容 , 自 行 制作 子 页 面 上 部 的 有 关 区 域 。 

(2) 切换 到 设计 视图 , 单 击 “ 插 入 ”面板 中 的 “插入 Div 标签 ”按钮 国 , 弹 出 “插入 Div 
标签 ”对 话 框 ,在 “插入 "下拉 列 表 框 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 下 拉 列 表 框 中 
选择 一 div id 一 "nav" 二 选项 ,在 ID 文本 框 中 输入 sub_main, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 
在 nav 容器 后 面 插入 sub_main 容器 。 切 换 到 div. css 文件 中 ,创建 名 为 # sub_main 的 
CSS 规则 ,如 图 8-77 所 示 。 

(3) 返回 设计 视图 ,删除 多 余 的 文字 ,在 sub_main 容器 内 部 再 次 插入 sub_main_left 
容器 ,并 为 其 编写 CSS 规则 ,如 图 8-78 所 示 。 


sub main 1 
float:left; 
width: 984px; 


sub main left { 
float:left; 
width:180px; 


height:auto; 
margin-top:225px; 


height:300px; 
margin-left:25px; 





图 8-77 名 为 #sub_main 的 CSS 规则 图 8-78 名 为 #sub_main_left 的 CSS 规则 


(4) 用 同样 的 制作 方法 ,在 sub_main_left 容器 内 部 插入 sub_main_left_top 容器 ,并 
为 其 编写 CSS 规则 ,如 图 8-79 所 示 。 切 换 到 设计 视图 ,删除 多 余 的 文字 ,并 输入 MENU 
课程 设置 ”文字 内 容 。 切 换 到 代码 视图 ,修改 二 div id="sub_main_left_top" 二 内 的 标签 ， 
如 图 8-80 所 示 。 





#sub main left top { 
width:180px; 
height:80px; 
background:url(../images/sub main left_top_bg.jpg) 
no-repeat; 
} 





8-79 名 为 # sub_main_left_top 的 CSS 规则 


zdilv Id="sub main left top"> 
<h3> MENU<span> 课 程 设置 </span></h3>| 
</div> 


图 8-80 ”修改 sub_main_left_top 容器 内 的 标签 





(5) 切换 到 div. css 文件 中 ,为 sub_main_left_top 的 二 h3 二 和 二 span 二 标签 创建 
CSS 规则 ,如 图 8-81 所 示 。 返 回 设计 视图 ,页 面 效果 如 图 8-82 所 示 。 

(6) 切换 到 设计 视图 , 单 击 “ 插 入 ”面板 中 的 “插入 Div 标签 ”按钮 国 , 弹 出 “插入 Div 
标签 ”对 话 框 ,在 “插入 "下拉 列 表 框 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 下 拉 列 表 框 中 
选择 一 div id= 王 "sub_main_left_top" 二 选项 ,在 ID 文本 框 中 输入 sub_main_left_mid, 最 
后 单 击 “ 确 定 ” 按 钮 , 即 可 在 sub_main_left_top 容器 后 面 插入 sub_main_left_mid 容器 。 
切换 到 div. css 文件 中 ,创建 名 为 # sub_main_left_mid 的 CSS 规则 ,如 图 8-83 所 示 。 
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sub main left top h3 { 
height:30px; 
font-family: "黑体 "; 
font-size:20px; 
color:#39F; 
text-align:center; 
padding-top:25px; 

} 

Fsub main left top h3 span { 
color:#666; 


margin-left:Spx; 
font-size:18px; MENU 课程 设置 


图 8-81 创建 天 h3 之 和 一 span> 标 签 的 CSS 规则 8-82 ”为 标题 和 span 应 用 样式 后 的 效果 








Bub main lert mid 1 
width:180px; 
height:auto; 
background:url(../images/sub main left mid bg.jpg)| 
repeat-—y; 
} 





图 8-83 名 为 #sub_main_left_mid 的 CSS 规 则 


(7) 切换 到 代码 视图 ,将 光标 定位 在 二 div id 王 "sub_main_left_mid" 之 的 后 面 , 插 入 
一 组 无 序列 表 , 并 输入 相应 的 文字 内 容 , 此 时 结构 代码 如 图 8-84 所 示 。 


<div id="sub main left mid"> 










<ul> 
<li><a "#"> 课 程 介绍 </a></1i> 
<li><a "> 课程 定位 </a></1i> 
<li><a "> 课程 设计 </a></1i> 
<1i><a href="#"> 课 程 标准 </a></1i> 
<1i><a href="#"> 职 业 技能 标准 </a></1i> 
</ul> 
</div> 





图 8-84 插入 无 序列 表 内 容 


(8) 切换 到 div. css 文件 中 ,为 无 序列 表 创 建 相 关 CSS 规则 ,如 图 8-85 所 示 。 返 回 设 
计 视 图 ,此 时 页 面 效 果 如 图 8-86 所 示 。 之 后 .在 sub_main_left_mid 容器 后 部 插入 sub_ 
main_left_behind 容器 ,并 为 其 编写 CSS 规则 ,如 图 8-87 所 示 。 





#sub main left mid ul { 
padding:0 25px; 
line-height:30px; : MENU 课程 设置 : 

} 上 


#sub main left mid ul li { 











| 1 
list-style:none; | 课程 介绍 | 
text-align:center; ! | 
border-bottom:1px dashed #CCC;| | 课程 定位 | 

} ! 课程 设计 | 
#sub main left mid ul a:hover { ! N | 
color:#39F; ! 课程 标准 ! 
text-decoration:none; | 职业 技能 标准 | 





8-85 ”为 无 序列 表 创建 CSS 规则 8-86 ”为 无 序列 表 应 用 样式 后 的 效果 
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background: 


height:25px; 
} 





Fsub main left behind 1 


lhr1(../images/sub main left behind bg.jpg) no-repeat; 





图 8-87 创建 #sub_main_left_behind 规则 


(9) 用 同样 的 制作 方法 ,对 页 面 主 内容 区 域 进行 布局 ,其 结构 代码 如 图 8-88 所 示 , 完 


成 后 的 CSS 样式 如 图 8-89 和 图 8-90 所 示 。 


<li><a 
<li><a 
<li><a 
<li><a 
<li><a 
<li><a 
<li><a 
</ul> 
</div> 
</div> 





<div id="sub main main"> 
<div id="sub main main top"><img src= 
"../images/sub main main top 01.gif" width="14" 
height="14”/><span> 当 前 位 置 :课程 设置 </span></div> 
<div id="sub main main content"> 
<ul class="sub main main content list"> 


href="#"> 课 程 介绍 </ a></1i> 
href="#"> 课 程 定位 </ a></1i> 
href="#"> 课 程 整体 设计 </a></1i> 
href="#"> 课 程 标准 </ a></1i> 
href="#"> 职 业 技能 标准 </a></1i> 
href="#"> 网 络 工程 行业 标准 </a></1i> 
href="#"> 综 合 布线 行业 标准 </a></ 1i> 





8-88 主 内 容 区 域 结 构 代码 





ub main main 
float:left; 
height: 800px; 
margin-left:10px; 

} 

#sub_main main top { 
width:720px; 
height: 55px; 
background: 


.gif) repeat-x; 
} 
#sub_main main top img { 
margin-top;20px; 
margin-left:30px; 
#sub_main main top span | 
color: #666; 
font-family: "黑体 "; 
font-size: 14px; 
padding-left:10px; 





) 


rl (../images/sub_main_ main_ top_bdl 





ub main main 
width:720px; 
height:auto; 


ntent 









.sub_main_main 
font-size: 14px; 
padding-top:20px; 
padding-left:SO0px; 
line-height:30px; 
list-style:square; 

} 


#sub_main main_content 1i 









over { 
color:#F00; 
text-decoration:none; 








LD 





8-89 创建 页 面 主 内 容 区 域 的 CSS 规则 (1) 


(10) 返回 设计 视图 ,此 时 页 面 效果 如 图 8-91 所 示 。 同 首页 中 制作 footer 的 方法 一 


样 , 制 作 子 页 面 的 底部 区 域 。 


至 此 ,精品 课程 网 站 的 主页 和 子 页 面 布局 的 实现 工作 已 经 基本 完成 了 ,后 期 还 需 根据 
实际 情况 增加 文字 链接 ,以 及 加 入 多 媒体 元 素 , 由 于 篇 幅 所 限 ,这 里 不 再 歼 述 ,请 读者 自行 


练习 。 


ntent_list 


border-bottom: 1px dashed #CCC; 


b main main_ content_list 





8-90 ”创建 页 面 主 内 容 区 域 的 CSS 规则 (2) 
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。 职业 技能 标准 
。 网 络 工程 行业 标准 


，。 综合 布线 行业 标准 











图 8-91 页 面 主 内 容 区 域 的 效果 


8.4 自主 任务 一 一 精品 课程 网 站 主页 的 制作 


参照 8. 3 节 所 讲 内 容 , 以 建设 精品 课程 网 站 为 实例 任务 ,自主 完成 精品 课程 网 站 主页 
的 制作 ,最 终 效果 如 图 8-92 所 示 ,布局 如 图 8-93 所 示 。 





A 









a sn 
2011 年 PI3 时 和 认证 报名 租 如。 2011-1 课 竹 特色 工程 课本 计 和 机 站 纪 
201 征 8 各 认 证 扫 名 通 如 2011-1 5 PT 
2011 年 3 思科 认证 报名 通 和 0 。 2011-1 en 和 
i 时 科 认 证 报名 通知 过 i 境 ， 末 成 册 位 化 教学 半 程 、 该 课程 通过 对 实际 工作 过 程 的 项 目 学 习 ， 使 
2 I 2 2 】 学 生 读 詹 于 中 小 型 局 械 网 进行 总 条 规划 和 度 
2011 年 3 思 科 认 证 恨 名 通知 。 2011-1-12 \ 了 计 ， 吉 中 和 设 计 进行 设 备 这 型 ， 角 过 咕 
< 网 络 总 笨 竣 计 的 到 未 进行 综合 布线 系统 的 讼 
5 JN 计 ， 范 工 ， 管 池 和 测试 验收 。 ly 
快速 cy g 
频 女 里 要 加 (Ey) Se 2 
导入 师 生 交流 课程 申报 表 vA、 
ommomeanion eetamamen rom < 
地 让 ， 抽 南 宪 人 市 二 风 站 而 共 地 过 条 技 大 字 计 页 机 字 续 名 培 .450000 志恒 千 
一 ASAWEB 和 Ema |, wufens1121E126 con 


全 为 首页 | 加 入 收藏 





课程 负责 人 ; 美 宇 泽 


20| | 年 计算 机 网 络 工程 精品 课程 


2010 "EATURED COURSES OF COMPUTERNETWORKS ENGNEERNG 








国字 精品 梁 和 江浙 河 国 | 














Cooyriaht SAII Rights Feserved 宁 入 网络 





8-92 ”精品 课程 网 站 主页 最 终 效果 图 (2) 
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2 
wrap top 
nav 
nay_logo nay_menu 
main 
main left main mid main right 
main_left_top main_mid_top 
main_left_bottom main mid_bottom | 
footer 
nav_logo footer_mid | | footer_behind | 























图 8-93 ”精品 课程 网 站 主页 布局 示意 图 (2) 


8.5 习题 


. 什么 是 行为 ? 什么 是 事件 ? 

.举例 说 明 ,在 网 页 中 “行为 ”都 应 用 于 哪些 方面 。 

.如 何 实现 网 页 警告 窗口 的 出 现 ? 

.什么 是 Spry? 

. 在 页 面 中 添加 Spry 选项 卡 式 面板 ,根据 需要 修改 其 中 的 CSS 样式 规则 ,使 其 外 观 
变 得 美观 。 
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【本 章 导 读 】 

通过 之 前 的 学 习 , 读 者 应 该 能 深刻 体会 到 “表现 与 结构 相 分 离 ” 的 重要 思想 ,以 及 
HTML 5 的 必要 性 。 本 章 在 原 有 的 学 习 基 础 上 ,向 读者 介绍 有 关 CSS 的 一 些 技 巧 和 常用 
技术 ,希望 能 够 帮助 读者 进一步 拓展 思维 ,提高 制作 网 页 的 水 平 。 

【学 习 目 标 】 

2? 掌握 CSS Sprite 技术 及 其 使 用 方法 ; 

名 掌握 部 分 伪 类 选择 器 的 基本 知识 ,以 及 使 用 方法 ; 

名 了 解 CSS 3 渐变 和 CSS 3 过 渡 的 相关 知识 ,并 能 够 利用 相关 CSS 规则 实现 简单 

效果 。 


9.1 CSS Sprite 技术 





CSS Sprite 通常 被 翻译 为 “CSS 图 像 拼 合 ”" 或 “CSS 贴图 定位 ”, 它 是 
目前 网 站 开发 中 应 用 较为 成 熟 的 技术 之 一 ,该 技术 最 重要 的 作用 就 是 减 
轻 服务 器 的 负载 ,提高 网 页 加 载 速度 。 


9.1.1 CSS Sprite 技术 简 述 


1. 技术 介绍 

自 CSS 被 广泛 应 用 以 来 ,HTML 文档 便 倾 向 于 语义 化 ,一 般 情况 下 设计 人 员 不 再 向 
标签 中 书写 装饰 性 的 内 容 ,而 是 把 这 些 外 观 呈 现 的 任务 交 给 CSS。 

2004 年 ,Dave Shea 提出 了 一 种 使 用 CSS 控制 组 合 图 片 的 方案 ,该 方案 就 是 后 来 被 
广泛 应 用 的 CSS Sprite 技术 。 该 技术 的 本 质 就 是 把 网 页 中 许多 要 用 到 的 小 背景 图 片 通 
过 Photoshop 整合 到 一 张 图 片 中 ,再 利用 CSS 的 background-image 属性 、background- 
repeat 属性 、 background-position 属性 的 组 合 进行 背景 定位 。 最 重要 的 是 ,通过 调整 
background-position 属性 的 属性 值 , 使 图 片 改 变 位 置 ,让 访问 者 看 到 的 仅 是 应 该 看 到 的 ， 
那些 不 该 看 到 的 背景 就 被 遮盖 住 了 。 

由 于 多 张 背 景 图 片 被 整合 在 一 张 图 片 内 , 当 页 面 加 载 时 并 不 是 单独 加 载 每 张 图 片 ,而 
是 一 次 性 加 载 组 合 过 的 整 张 图 片 ,因此 大 大 减少 了 HTTP 请 求 的 次 数 ,减轻 了 服务 器 的 








Dreamweaver CS6 十 HTML 5 十 CSS 3 网 页 制作 基础 教程 ( 微 课 版 ) 


压力 ,这 是 诸多 大 型 网 站 都 在 使 用 CSS Sprite 的 重要 原因 。 此 外 ,提前 加 载 的 图 片 被 储 
存在 浏览 器 的 缓存 中 ,后 期 调用 时 可 以 直接 读 取 ,缩短 了 鼠标 悬 停 时 加 载 图 片 的 时 间 延 
迟 ,增强 了 访问 者 的 视觉 体验 。 

2. 技术 应 用 

CSS Sprite 技术 常 被 应 用 在 大 型 网 站 的 背景 控制 中 ,图 9-1 和 图 9-2 所 示 是 一 些 CSS 
Sprite 使 用 范例 。 








图 9-2 搜狐 网 的 部 分 背景 图 片 


3. 优 缺 点 

CSS Sprite 非常 值得 学 习 和 应 用 ,但 网 站 中 是 否 应 该 使 用 CSS Sprite 还 需要 根据 实 
际 情况 进行 分 析 , 它 的 优点 主要 表现 在 以 下 两 个 方面 。 

(1) 能 够 有 效 减少 网 页 的 HTTP 请 求 , 大 幅 提高 页 面 性 能 。 

(2) 能 够 有 效 减 少 图 片 的 字 节 数 。 例 如 ,将 3 张大 小 均 为 2KB 的 图 片 拼合 成 一 张 图 
片 后 总 字 节 数 小 于 6KB。 

其 缺点 主要 表现 在 以 下 两 个 方面 。 

(1) CSS Sprite 大 多 使 用 固定 的 像素 定位 ,灵活 性 较 差 。 

(2) 在 开发 的 时 候 较 为 麻烦 ,需要 用 Photoshop 或 其 他 测量 工具 计算 出 每 个 背景 元 
素 的 精确 位 置 。 

总 之 ,网 页 设计 者 需要 整体 权衡 一 下 利 丈 ,在 可 维护 性 和 降低 负载 之 间 选 择 最 适合 的 
击 式 : 


9.1.2 CSS Sprite 技术 详解 


为 了 使 读者 更 容易 地 理解 CSS Sprite, 这 里 以 某 网 站 的 图 标 背 景 为 例 ,演示 如 何 使 用 
CSS Sprite 技术 实现 页 面 效 果 。 
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【案例 9-1】 CSS Sprite 技术 详解 。 

本 案例 使 用 的 是 一 张 由 多 个 图 标 整 合 在 一 起 的 图 标 背 景 图 片 ,如 图 9-3 所 示 , 拟 通过 
调整 背景 图 片 的 background-position 属性 值 ,实现 在 相应 文字 列表 的 左 侧 显示 对 应 
图 标 。 

@ 启动 Dreamweaver CS6 ,创建 空白 HTML 5 文档 。 在 文档 中 使 用 一 组 无 序列 表 
对 文字 内 容 进 行规 划 , 具 体 的 结构 代码 如 图 9-4 所 示 。 








TT E] 
了 
加 号 
@ 多 ee 
<1i class="clothes"><a href="#"> 服 装 </a></1i> 
网 EE <11 class="car"><a href="#"> 汽 车 c/a></1i> 


<1i class="furniture"><a href="#"> 家 具 </a></11>| 
<1i class="life"><a href="#"> 生 活 </a></1i> 
<1i class="mamicare"><a href="#"> 孕 婴 c/a></1i> 





[er 


图 9-3 ”图标 背景 图 9-4 案例 9-1 的 结构 代码 


@ 有 了 语义 化 的 结构 ,下 面 主要 对 样式 进行 定义 。 首 先 ,从 大 到 小 进行 定义 ,将 外 边 
距 、 内 边 距 和 边框 设置 为 0px; 其 次 ,定义 所 有 二 li 二 标签 的 宽度 为 80px, 高 度 为 20px, 超 
出 的 部 分 进行 隐藏 设置 ;再 次 ,使 用 “list-style: none;” 规 则 ,清除 二 li 二 的 默认 样式 ,并 且 
设置 二 li> 标 签 中 的 内 容 缩 进 20px 的 距离 ,用 于 放置 图 标 ; 最 后 ,增加 背景 图 片 , 具 体 的 
样式 代码 如 图 9-5 所 示 。 

@ 保存 页 面 文档 ,通过 浏览 器 预览 后 的 效果 如 图 9-6 所 示 。 仔 细 观 察 效果 图 可 以 发 
现 , 虽 然 每 个 列表 中 都 有 背景 图 片 ,但 显示 的 都 是 图 标 背 景 中 的 第 一 个 图 标 ,并 不 是 根据 
文字 内 容 显示 对 应 图 标的 效果 。 





nav GT T 
margin: Opx; 
padding: Opx; 
border: Opx; 


1if 
width: BOpx; 

height; 20px: 

overflow: hidden; 

list-style: none; 

padding-left: 20px; 

background: urll(ico bg.gif) no-repeat 0 0 





#nav 1i a ttext-decoration: none;} 


图 9-5 过 ul 和 < 一 li 全 的 CSS 样式 规则 图 9-6 案例 9-1 的 预览 效果 








图 为 了 解决 上 述 问题 ,需要 针对 每 个 不 同类 别 的 二 li 二 标签 ,分 别 编写 对 应 的 CSS 
样式 ,以 达到 想 要 的 页 面 效 果 。 添 加 部 分 CSS 样式 ,利用 background-position 属性 改变 
背景 图 片 的 位 置 , 具 体 的 CSS 样式 代码 如 图 9-7 所 示 。 


pe 
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A 


@ 保存 当前 页 面 文档 ,再 次 预览 可 以 看 到 页 面 效 果 , 如 图 9-8 所 示 。 


av 1i.books 1 
background-position: Opx Opx; 























} 
inav 1i.telephone { 
background-position: -250px Opx; 
} 
#nav 1i.clothes { 
background-position: 0 -60px; 





} 
#nav 1i.car { 
background-position: -250px -150px; 





} 
#nav 1i.furniture 《 

background-position: -250px -90px; 
} 
#nav 1i.life { 

background-position: -250px -60px; 
} 
fnav 1i.mamicare { 

background-position: Opx -90px; 











} 


图 9-7 改变 背景 图 片 的 位 置 图 9-8 案例 9-1 的 最 终 预览 效果 


从 图 中 可 以 看 出 ,不 同 的 列表 内 容 左 侧 显 示 不 同类 型 的 图 标 ,达到 了 预想 的 效果 。 引 
起 图 标 改变 的 原因 在 于 应 用 于 每 个 列表 的 类 ,通过 background-position 属性 定位 在 背景 
图 片 的 不 同位 置 ,从 而 显示 不 同 的 图 标 。 

分 析 图 9-7 所 示 的 样式 代码 可 知 ,为 了 实现 每 个 二 li 二 标签 对 应 的 图 标 有 所 不 同 , 本 
案例 中 针对 每 个 不 同 的 列表 分 别 定义 不 同 的 类 名 ,并 在 CSS 样式 中 通过 修改 定位 坐标 ， 
使 之 能 得 到 相应 的 图 标 。 

这 里 有 个 十 分 重要 的 问题 ,既然 某 些 图 标 位 于 水 平方 向 250px, 垂 直方 向 150px 的 位 
置 上 ,为 什么 在 CSS 样式 中 调用 时 却 使 用 负 值 呢 ? 

background-position 属性 值 为 负 值 的 情况 需要 这 样 理解 : 本 实例 中 用 于 显示 列表 的 
区 域 宽度 为 80px, 高 度 为 20px, 要 想 显示 对 应 的 图 标 势必 要 移动 背景 图 片 , 使 图 标 精 确 
显示 在 列表 中 。 根 据 background-position 属性 的 定义 可 知 , 属 性 值 中 的 第 一 个 数字 表示 
水 平 位 置 ,第 二 数字 表示 垂直 位 置 , 而 默认 状态 下 元 素 及 其 元 素 背 景 是 以 左上 角 为 原点 进 
行 定位 ,这 就 是 为 什么 在 未 进行 背景 定位 时 所 有 图 标 均 显示 为 图 标 背 景 中 左上 和 角 图 标的 
原因 。 

对 于 其 他 列表 项 来 说 ,由 于 需要 显示 不 同 的 图 标 ,就 要 对 背景 图 片 进行 移动 处 理 。 
“background-position: 50px 100px;” 这 条 规则 说 明 , 图 像 将 被 移动 到 距 左 50px、 距 顶 
100px 的 位 置 上 , 即 图 片 向 右 移 动 了 50px, 向 下 移动 了 100px。 反 过 来 ,如 果 图 片 被 向 左 
或 向 上 移动 , 则 background-position 的 属性 值 为 负 值 。 本 案例 中 ,以 class 类 名 为 car 的 
列表 为 例 , 样 式 代 码 为 “# nav li. car {background-position: 一 250px 一 150px;)”。 

此 规则 将 背景 图 片 向 左 移动 了 250px 的 距离 ,向 上 移动 了 150px 的 距离 ,将 汽车 图 
标 显 示 在 汽车 文字 链接 的 左 侧 ,示意 图 如 图 9-9 所 示 。 由 此 ,可 以 总 结 出 定位 图 片 在 向 各 
个 方向 移动 时 取 值 的 正 负 关系 ,如 图 9-10 所 示 。 另 外 ,在 实际 应 用 中 并 不 是 随意 的 拼合 
图 片 ,而 是 要 根据 页 面 的 整体 需要 进行 规划 考虑 的 。 在 使 用 CSS Sprite 的 时 候 需要 注意 
以 下 几 个 方面 。 
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个 
里 
| ( 负 信 , 负 值 ) (正信 , 负 值 ) 
全 
一面 
. ( 负 值 , 正 值 ) (正信 ,正信 ) 
岂 








图 9-9 CSS Sprite 定位 图 9-10 background-position 属性 正 负 取 值 关 系 
(1) 容器 的 宽度 和 高 度 要 固定 。 


(2) 超出 容器 宽度 和 高 度 的 部 分 需要 隐藏 。 
(3) 各 张 图 片 之 间 要 留 有 空 际 , 以 便 调用 时 不 会 出 现 文字 覆盖 图 片 的 情况 。 


9.2 CSS 3 伪 类 选择 器 


在 之 前 的 章节 中 ,读者 已 经 接触 到 一 些 选择 器 的 使 用 方法 ,本 节 主要 向 读者 介绍 CSS 
3 中 新 增 的 伪 类 选择 器 ,以 便 在 工作 中 灵活 运用 。 
:7 [a] 
i 







9.2.1 :root、:not、:target 和 : :selection 选择 器 


1。:root 选择 器 

:root 选择 器 将 样式 与 文档 的 根 元 素 进行 匹配 。 这 里 根 元 素 是 指 位 回 
于 文档 树 中 最 顶层 的 元 素 , 在 HTML 中 , 根 元 素 始 终 是 html 元 素 。 

【案例 9-2】 :root 选择 器 。 

Oz 在 Dreamweaver CS6 中 创建 HTML 5 文档 ,在 新 建 的 文档 中 创建 如 图 9-11 所 示 
的 文档 结构 。 

@ 在 当前 页 面 的 head 区 域 ,编写 相应 的 CSS 规则 。 这 里 将 body 元 素 的 背景 颜色 设 
置 为 红色 ,使 用 :root 选择 器 将 根 元 素 背景 色 设置 为 黄色 ,具体 代码 如 图 9-12 所 示 。 


<style type="text/css"> 
root { 
background: #FCO; 


)V* 设 置 根 元 素 背 景色 为 黄色 */ 


bod 
background: #F30; 
)/* 设 置 body 元 素 背 景色 为 红色 */ 


</style> 


图 9-11 案例 9-2 的 页 面 结构 图 9-12 使 用 :root 选择 器 设置 背景 色 





@ 保存 当前 页 面 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 9-13 所 示 。 


2. :not 选择 器 
:not 选择 器 能 够 排除 某 个 结构 中 的 子 元 素 , 让 它 不 继承 当前 样式 。 
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1 
A 
pe 


body 元 素 背景 


html 元 素 背 景 





图 9-13 :root 选择 器 的 预览 效果 
【案例 9-3】〗 :not 选择 器 。 
@ 继续 使 用 案例 9-2 中 的 页 面 结构 。 
@ 在 当前 页 面 的 head 区 域 ,修改 相应 的 CSS 规则 ,具体 代码 如 图 9-14 所 示 。 保 存 
当前 页 面 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 9-15 所 示 。 


ban i filey//E:/ 编 sw ? 








<style type="text/css"> 
:not { 

background: #FCO; 
}/* 设 置 根 元 素 背 景色 为 黄色 */ 
body { 

background:; 
)Mw i _ 
body *:not (hi) 

Pa En 
We" 人 和 他 许 景色 为 绿色 “/ 
</style> 


图 9-14 增加 :not 选择 器 规则 图 9-15 :not 选择 器 的 预览 效果 











本 案例 中 , 先 将 body 元 素 背 景 颜色 设置 为 红色 ,又 使 用 :not 选择 器 设置 在 body 元 
素 内 除 hl 元 素 以 外 的 背景 色 为 绿色 。 根 据 当前 页 面 结构 分 析 可 知 ,hl 元 素 背 景色 为 红 
色 ,p 元 素 背 景色 为 绿色 。 


3。:target 选择 器 
:target 选择 器 能 够 选取 当前 活动 的 目标 元 素 。 这 里 目标 元 素 是 指 
ma 当 页 面 中 包含 锚 链 接 时 ,该 锚 链 接 所 指向 的 某 个 具体 的 元 素 。 
ti 【案例 9-4】 :target 选择 器 。 
Oa 在 Dreamweaver CS6 中 创建 HTML 5 文档 ,在 新 建 的 文档 中 创建 如 图 9-16 所 示 
的 文档 结构 。 
@ 在 当前 页 面 的 head 区 域 , 编 写 相应 的 CSS 规则 ,具体 代码 如 图 9-17 所 示 。 
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@ 保存 当前 页 面 , 通 过 浏览 器 预览 即 可 看 到 效果 ,如 图 9-18 所 示 。 


pody> 
<p><a href="#news1"> 跳 转 至 内 容 1</a></p>| 





<p><a href="#news2"> 跳 转 至 内 容 2</a></p3| 
<p id="news1l"><b> 内 容 1...</b></p> 

<p id="news2"><b> 内 容 2...</b></p> 
</body> 


9-16 案例 9-4 的 页 面 结构 














[<sEYIE type="text/cas"S 
:target { 
border: 2px solid #D4D4D4;| 
background-color: #eSeecc;| 
}/* 设 置 边框 和 背景 颜色 */ 
</style> 


图 9-17 ;target 选择 器 规则 图 9-18 :target 选择 器 的 预览 效果 











4.: :selection 选择 器 

;selection 选择 器 能 够 匹配 被 用 户 选 择 时 的 部 分 内 容 应 用 别 的 样式 。 需 要 说 明 的 
是 ,目前 只 能 向 该 选择 器 应 用 少量 CSS 样式 (color background cursor 以 及 outline) 。 

【案例 9-5】 : :selection 选择 器 。 

Oa 在 Dreamweaver CS6 中 创建 HTML 5 文档 ,在 新 建 的 文档 中 创建 如 图 9-19 所 示 
的 文档 结构 和 CSS 规则 。 

@ 保存 当前 页 面 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 9-20 所 示 。 


KR'doctype htmi> 





hteml> 
<head> 
emeta charset="utf-8"> 
<title>selection 选 择 器 <c/title> 
<style type="text/css"> 
::selection { 二 、 \、P 司 

请 读者 尝试 焉 其 
)/* 设 置 华 景 颜色 */ 


Sera 此 处 部 分 文字 , : 
看 看 有 什么 效果 


< > CQ 


<boay> 
<h1> 请 读者 岩 试 选择 此 处 部 分 文字 ， 看 看 有 什么 效果 </h1>| 











</body> 

/html> 

9-19 案例 9-5 的 页 面 结构 与 CSS 规则 图 9-20 ::selection 选择 器 的 预览 效果 
9.2.2 :first-child 、 :last-child 和 :only-child 选择 器 下 | 





1. :first-child 选择 器 

:first-child 选择 器 用 于 选取 隶属 其 父 元 素 的 首 个 子 元 素 。 

2. :last-child 选择 器 

:last-child 选择 器 用 于 选取 隶属 其 父 元 素 的 最 后 一 个 子 元 素 。 

3。 :only-child 选择 器 

:only-child 选择 器 用 于 选取 当 父 元 素 有 唯一 子 元 素 时 的 元 素 对 象 。 
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/ 【案例 9-6】 :first-child、:last-child 和 :only-child 选择 器 。 
a 在 Dreamweaver CS6 中 创建 HTML 5 文档 ,在 新 建 的 文档 中 创建 如 图 9-21 所 示 
的 文档 结构 。 
@ 在 当前 页 面 的 head 区 域 ,编写 相应 的 CSS 规则 ,具体 代码 如 图 9-22 所 示 。 
@ 保存 当前 页 面 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 9-23 所 示 。 


style type="text/css"> 
i:rirst-child { 






































<body> background-color: #0CF; 
<nav id="page nav"> )/* 设 置 第 一 个 列表 项 的 背景 色 */ 
<ul> li:last-child { 


background-color: #6F9; 
}/* 设 置 最 后 一 个 列表 项 的 背景 色 */ 
article { 
border: 1px #0066FF solid; 
margin: Spx; 


<1i><a href="#"> 首 页 0</a></11>| 
<li><a href="#"> 导 航 1</a></11>| 
<li><a href="#"> 导 航 2</a></11>| 
<1li><a href="#"> 导 航 3¢</a></1i> 
<li><a href="#"> 导 航 4</a></1i> 








<Val> padding: Spx; 
</nav> 
<article> nly-child { 

<h1> 这 里 有 1 个 hi</h1> font-style: italic; 
</article> font-family: "微软 雅 黑 "; 
<article> font-weight: bolder; 

<h1> 这 里 有 2 个 hi</h1> font-size: 30px; 

<h1> 这 里 有 2 个 hi</h1> color:#F00; 
</article> )/* 仅 作用 于 父 元 素 包 含 1 个 hi 标题 的 元 素 */| 
</body> </style> 





图 9-21 案例 9-6 的 页 面 结构 图 9-22 多 种 选择 器 规则 


DD first-child. le: x 
2G 








1 个 hl 元 素 , 所 以 ， | 
only-child 选 择 器 能 义 基因 序 1 个 hI 


作用 到 该 元 素 中 








这 里 有 2 个 hl 
这 里 有 2 个 hl 














图 9-23 多 种 选择 器 的 预览 效果 





a 9.3 CSS 3 渐变 
二 四 

以 往 要 在 网 页 中 实现 渐变 效果 依赖 于 预先 制作 完成 的 图 像 渐 变 背 
景 , 这 种 办 法 虽然 不 那么 灵活 ,但 绝 大 多 数 设计 者 还 必须 这 么 去 做 ,以 便 
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给 访问 者 安全 地 呈现 出 渐变 效果 。 目 前 ,使 用 CSS 3 能 够 实现 渐变 效果 , 且 支 持 无 极 缩 
放 , 但 是 该 方法 仅 适用 于 Webkit 和 Gecko 引擎 的 浏览 器 ,而 且 在 使 用 过 程 中 的 语法 也 有 
不 同 。 本 节 仅 向 读者 简单 介绍 基于 Webkit 引擎 的 浏览 器 实现 的 渐变 效果 ,至 于 更 多 知 
识 鉴于 内 容 较 多 ,请 读者 查阅 相关 资料 。 


1，Webkit 引擎 支持 的 CSS 渐变 语法 

1) 线性 渐变 

-webkit-gradient 是 Webkit 引擎 对 渐变 的 实现 参数 ,例如 ,有 以 下 线性 渐变 语句 。 

-webkit- gradient (linear, left top, left bottom，from (# 000) ，to (# fff) ， 

color- stop(0.4, #666)); 

第 一 个 参数 表示 渐变 类 型 (type) ,可 以 是 linear( 线 性 渐变 ) 或 者 radial( 径 向 渐变 ) 。 

第 二 个 参数 和 第 三 个 参数 ,都 是 一 对 值 , 分 别 表示 渐变 起 点 和 终点 。 这 对 值 可 以 用 坐 
标 形式 表示 ,也 可 以 用 关键 值 表示 ,比如 left top( 左 上 角 ) 和 left bottom( 左 下 角 ) 。 

第 四 个 参数 和 第 五 个 参数 ,分 别 表示 渐变 颜色 的 开始 颜色 值 和 结束 颜色 值 。 

第 六 个 参数 是 一 个 color-stop 函数 ,该 函数 包含 两 个 参数 ,第 一 个 参数 取 值 范围 是 
0. 0 一 1.0, 表 示 位 置 偏 移 量 ;第 二 个 参数 是 停靠 颜色 值 。 当 前 对 象 中 包含 两 个 以 上 的 渐 
变 ,color-stop 函数 才能 使 用 。 

2) 径 向 渐变 

例如 ,有 以 下 径 向 渐变 语句 。 

一 webkit- gradient (radial, 125 125, 50, 

125 125, 100, 
from(#000), to(#FFF)); 

这 里 radial 表示 渐变 类 型 为 径 向 渐变 ,有 两 个 同心 圆 ,圆心 坐标 为 (125,125) ,内 
圆 半 径 为 50, 外 圆 半 径 为 100, 从 内 圆 黑 色 到 外 圆 白 色 径 向 渐变 ,超出 外 圆 半 径 部 分 
显示 为 白色 。 


2. 创建 CSS 3 渐变 

【案例 9-7】 CSS 3 渐变 。 

@ 在 Dreamweaver CS6 中 创建 HTML 5 文档 ,在 新 建 的 文档 中 创建 如 图 9-24 所 示 
的 文档 结构 。 





body> 
div id="box-1"” class="boxn> 线 性 渐变 </div 
div id="box-2" class="boxn> 径 向 渐变 </div 


/body> 





9-24 案例 9-7 的 页 面 结构 


@ 在 当前 页 面 的 head 区域, 编写 相应 的 CSS 规则 ,具体 代码 如 图 9-25 所 示 。 
@ 保存 当前 页 面 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 9-26 所 示 。 


~、 


pe 
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pi 


[<sEYIE Type="text/ cas" 
‘box { 
width: 250px; 
height: 250px; 
margin: 10px; 
display: -webkit-box; 
-webkit-box-align: center; 
~webkit-box-pack: center; 
color: #FFF; 
font : 50px "微软 雅思"; 


#box-1 { 

background-image: 
-webkit-gradient (linear, left top, left| 
bottom, from(#f£4£02), to(#8£2c00), 
color-stop(0.5, #FCO)); 
} 
#box-2 1 

background-image: 
-webkit-gradient (radial, 125 125, 50, 
125 125, 100, from(#00C), to(#0CF)); 
;} 
</style> 


图 9-25 创建 渐变 的 CSS 规则 图 9-26 渐变 的 预览 效果 











加 
Er 9.4 CSS 3 过 渡 





在 CSS 2. 1 之 前 ,设计 师 通 常 依赖 JavaScript 脚本 实现 二 维 或 三 维 
动画 ,而 现在 借助 CSS 3 同样 可 以 完成 类 似 的 效果 。 

CSS 3 过 渡 (transition 属性 ) 是 元 素 从 一 种 样式 逐渐 改变 为 男 一 种 效果 的 过 程 ,通俗 
地 讲 就 是 一 种 动画 的 转换 过 程 , 例 如 渐 显 ` 渐 隐 和 动画 的 快慢 等 。 


9.4.1 transition 属性 简介 


transition 属性 是 一 个 复合 属性 ,可 以 同时 定义 transition-property、 transition- 
duration \transition-timing-function 和 transition-delay 多 种 子 属性 。 下 面 简单 介绍 各 种 
属性 的 含义 。 


1. transition-property 属性 

transition-property 属性 规定 应 用 过 渡 效 果 的 CSS 属性 的 名 称 , 可 以 取 none( 没 有 元 
素 获得 过 渡 效 果 ) .all( 所 有 属性 都 获得 过 渡 效 果 ) 和 property( 指 定 应 用 过 渡 效 果 的 属性 
名 称 )3 种 属性 值 。 


2. transition-duration 属性 
transition-duration 属性 规定 完成 过 渡 效 果 需 要 花费 的 时 间 ( 以 秒 或 毫秒 计 )。 默 认 
状态 下 ,动画 的 过 渡 时 间 为 0 秒 , 即 访问 者 不 会 看 到 变化 过 程 直接 看 到 结果 。 如 果 将 时 间 
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设置 为 1 秒 , 则 访问 者 会 在 1 秒 内 看 到 变化 效果 。 

3。. transition-timing-function 属性 

transition-timing-function 属性 用 来 定义 过 渡 动 画 的 效果 ,可 以 取 以 下 6 种 属性 值 。 

(1) ease: 慢 速 开始 ,中 间 变 快 ,最 后 慢 速 结束 的 过 渡 效 果 。 

(2) linear: 以 相同 速度 开始 至 结束 的 过 渡 效 果 。 

(3) ease-in: 渐 显 效果 。 

(4) ease-out: 渐 隐 效果 。 

(5) ease-in-out: 淡 入 /淡出 效果 。 

(6) cubic-bezier: 特殊 的 立方 贝 塞 尔 曲线 效果 。 

4. transition-delay 属性 

transition-delay 属性 规定 过 渡 效 果 延 迟 多 长 时 间 开 始 。 

5。.transition 属性 

transition 属性 是 以 上 4 个 属性 的 简写 属性 ,例如 ,CSS 规则 “transition: all 1s ease- 
in-out 0. 4s;” 是 指 当前 对 象 获得 过 渡 效 果 , 其 过 渡 时 间 为 1 秒 , 过 渡 效 果 为 淡 入 /淡出 ,并 
上 且 延 迟 0. 4 秒 再 开始 执行 。 


9.4.2 CSS 3 过 渡 动画 的 实现 


为 了 让 读者 深入 了 解 CSS 3 过 渡 动 画 效 果 的 实现 过 程 , 这 里 以 案例 的 形式 进行 分 析 
讲解 。 

【案例 9-8〗 CSS 3 过 渡 动 画 。 

本 例 想 要 完成 的 效果 如 图 9-27 所 示 , 当 鼠标 悬 停 在 圆 形 对 象 上 时 ,紫色 半 透 明 的 圆 
形 从 中 间 缩 放 至 整个 圆 形 对 象 ,里 面 的 文字 延迟 显示 ; 当 鼠 标 移 除 圆 形 对 象 时 ,紫色 半 透 
明 的 圆 形 逐 渐 消 失 , 仅 显示 包含 图 像 背 景 的 立体 边框 。 





图 9-27 CSS 3 过 渡 动画 最 终 效 果 


@ 在 Dreamweaver CS6 中 创建 HTML 5 文档 ,在 新 建 的 文档 中 创建 如 图 9-28 所 示 
的 文档 结构 。 
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ody> 
div id="box-1"> 
<div> 
<h3> 我 是 谁 ? </h3> 
<p> 我 是 一 个 4 岁 的 宝宝 ， 在 幼儿 园 上 中 一 班 * </p> 


<h3> 我 的 家 人 </h3> 
<p> 我 爱 我 的 家 人 ， 他 们 为 我 整 天 忙碌 。</p> 
</div> 
[</div> 


<aiv id="box-3"> 
<div> 
<h3> 成 长 日 记 </h3> 
<p> 除 了 在 幼儿 园 度 过 每 天 外 ， 周 末 我 还 有 外 出 活动 。 
</p></div> 





图 9-28 案例 9-8 的 最 初 页 面 结构 


@ 为 了 使 3 个 块 级 div 元 素 水 平 排列 ,这 里 拟 使 用 浮动 属性 来 解决 这 个 问题 。 此 外 ， 
为 了 使 3 个 块 级 div 元 素 外 观 相 同 , 拟 创建 box 类 分 别 应 用 到 3 个 div 元 素 中 ,具体 的 
CSS 规则 ,以 及 对 页 面 结构 的 修改 如 图 9-29 和 图 9-30 所 示 。 保 存 当 前 页 面 , 通 过 浏览 器 
预览 即 可 看 到 效果 ,如 图 9-31 所 示 。 














<body> 
<div id="box-1" class="fl box" > 
<div> 
<h3> 我 是 准 ? </h3> 
<p> 我 是 一 个 4 岁 的 宝宝 ， 在 幼儿 园 上 中 一 班 。</p> 
</div> 
</div> 
<div id="box-2" class="fl box"> 
"ET {float: lefc:} <div> 
,box { <h3> 我 的 家 人 </h3> 
width: 220px; <p> 我 爱 我 的 家 人 ， 他 们 为 我 整 天 忙碌 。</p> 
height: 220px; </div> 
color: #333; </div> 
border-radius: 504;/* 设 置 图 角 拓 形 ， 使 正方 形 的 外 观 显 <div id="box-3" class="fl box"> 
示 为 图 形 */ <div> 
margin: 10px; <h3> 成 长 日记 </h3> 
cursor: pointer;/* 饼 标 悬 停 该 对 象 时 显示 出 手 形 鼠 标 外 观 */ <p> 除 了 在 幼儿 园 度 过 每 天 外 ， 周 未 我 还 有 外 出 活动 。 
box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6) </p> </div> 
0 1px 2px rgba(0,0,0,0.1) ;/* 设 置 边框 的 粗细 、 颜 色 和 透明 度 */ </div> 
) </body> 
9-29 ”创建 相关 类 规则 图 9-30 应 用 全 和 box 类 后 的 页 面 结构 


六 Css 3 过 流动 画 
Ca 





我 是 谁 ? 我 的 家 人 成 长 日 记 
我 是 一 个 4 岁 的 宝宝 ， 在 幼儿 园 。 我 爱 我 的 家 人 ， 他 们 为 我 整 天 。 除了 在 幼儿 园 度 过 每 天 外 ， 周 末 
上 中 一 班 忙碌 。 我 还 有 外 出 活动 。 


一 班 。 





图 9-31 应 用 身 和 box 类 后 的 预览 效果 
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@ 为 了 方便 地 控制 页 面 结 构 中 的 各 个 元 素 , 这 里 再 次 修改 页 面 结构 ,引入 ch-info 类 
作用 在 div 元 素 上 ,使 其 作为 紫色 动画 背景 的 容器 出 现 , 修 改 后 的 页 面 结构 和 对 应 的 CSS 
规则 ,如 图 9-32 和 图 9-33 所 示 。 


<body> 
<div id="box-1" class="fl box"> 
<div class="ch-info"> 
<h3> 我 是 谁 ? </h3> 
<p> 我 是 一 个 4 岁 的 宝宝 ， 在 幼儿 园 上 中 一 班 * </p> 
</div> 
</div> 
<div id="box-2" class="f] box"> 
<div class="ch-info"> 
<h3> 我 的 家 人 </h3> 
<p> 我 爱 我 的 家 人 ， 他 们 为 我 整 天 忙碌 。 </p> 
</div> 
</div> 
<div id="box-3" class="fl box"> 





<div class="ch-info"> 
<h3> 成 长 日 记 </h3> 
<p> 除 了 在 幼儿 园 度 过 每 天 外 ， 周 末 我 还 有 外 出 活动 。 


</p> </div> 








图 9-32 引入 ch-info 类 作用 在 div 元素 上 


#box-1 {background-image: url(images/00.jpg);} 
#box-2 {background-image: url (images/02.jpg);) 
#box-3 {background-image: url (images/03.jpg);)}) 
.ch-info { 
background: rgba(140, 65,170，0.6) ;/* 设 置 紫色 的 背景 色 ， 其 透明 度 为 60%*/ 
width: inherit;/* 继 承 父 级 元 素 的 宽度 */ 
height: inherit; 
border-radius: 50s;/* 设 置 圆 角 拒 形 ， 这 里 使 正方 形 显示 为 圆 形 */ 
opacity: 0;/w 设 置 对 象 的 透明 度 ， 这 里 是 完全 透明 ， 初 始 状态 无 法 看 到 当前 对 象 */ 
-webkit-transition; all 0.43 ease-in-ouc;/* 设 置 当前 对 象 动画 效果 为 
淡 入 /淡出 ， 且 动画 时 间 为 0.4 秒 */ 
transition: all 0.43 ease-in-out; 
-webkit-transform: scale (0) ;/* 设 置 当前 对 象 的 缩放 比例 ， 这 里 为 缩放 到 最 小 */| 


transform: scale(0); 








图 9-33 ch-info 类 规则 


@ 通过 预览 可 以 发 现 , 虽 然 图 像 已 经 载 人 ,但 是 没有 过 渡 动画 效果 ,其 原因 是 没有 使 
用 伪 类 :hover 作为 触发 对 象 。 这 里 进一步 完善 CSS 规则 ,如 图 9-34 所 示 。 

@@ 为 了 让 容器 内 标题 和 段落 文字 显示 得 更 加 美观 ,这 里 针对 标题 和 段落 编写 CSS 规 
则 ,如 图 9-35 所 示 。 

至 此 ,保存 网 页 文档 ,并 通过 浏览 器 即 可 看 到 具有 过 渡 动 画 的 最 终 效 果 。 文 中 与 过 渡 
相关 的 CSS 规则 ,以 及 较 难 理解 的 CSS 规则 均 有 详细 的 注释 和 讲解 ,请 读者 仔细 体会 其 
中 的 含义 。 


Dreamweaver CS6 十 HTML 5 十 CSS 3 网 页 制作 基础 教程 ( 微 课 版 ) 





-box:hover 《 

box-shadow: inset 0 0 0 lpx rgba(255,255,255,0.1), 
0 ipx 2px rgba(0,0,0,0.1) 
}/* 当 恨 标 县 停 时 ， 边 框 的 粗细 、 基色 和 运 明 度 */ 
.box:hover .ch-info { 

-webkit-transform: scale(1):/* 当 鼠标 悬 停 时 ， 缩 放 比 
例 变 为 1， 即 原始 大 小 */ 

transform: scale(1); 

opacity: 1;:/* 当 鼠标 悬 停 时， 透明 度 为 1 ， 即 完全 显示 */ 
} 
box:hover .ch-info p 4 

opacity: 1;/* 当 鼠标 悬 停 时， 透明 度 为 1 ， 即 完全 显示 */ 
} 








9-34 ”与 伪 类 :hover 相关 的 CSS 规则 


-ch-info h3 
letter-spacing: 2px; 
font-size: 30px; 
margin: 0 0 0 SOpx; 
padding: 70px 0 0 0; 
height: SOpx; 
font-family: "微软 雅 黑 "; 

} 

‘ch-info p 1 
padding: 10px Spx; 
margin: 0 30px; 
font-size: 12px; 
border-top: 1px solid rgba(255,255,255,0.5); 
opacicy: 0; 

-webkit-transition: all 13 ease-in-out 0.43; 
/* 设 置 段落 p 元 素 延 迟 0 .4 秒 后 淡 入 / 淡出 显示 ， 其 过 渡 时 间 为 1 积 */ 


transition: all 1s ease-in-out 0.4s; 








图 9-35 针对 标题 和 段落 的 CSS 规则 


9.5 习题 


1. 什么 是 CSS Sprite 技术 ? 它 的 优 缺 点 各 是 什么 
2. 什么 是 :not 选择 器 ? 什么 是 :target 选择 器 ? 
3，Webkit 引擎 支持 的 CSS 渐变 语法 是 什么 ? 
4， 使 用 transition 属性 能 够 实现 何 种 效果 ? 
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【本 章 导 读 】 

在 完成 本 地 站 点 所 有 页 面 的 制作 工作 以 后 ,整个 网 站 并 不 能 直接 投入 使 用 ,必须 经 过 
全 面 而 完整 的 测试 工作 , 当 网 站 能 够 稳定 地 运行 后 ,才能 将 站 点 上 传 到 已 准备 好 的 空间 
中 。 本 章 将 从 网 站 的 测试 上传 和 维护 三 个 方面 介绍 相关 的 知识 与 操作 方法 。 

【学 习 目 标 】 

名 了解 站 点 测试 的 相关 知识 以 及 基本 测试 方法 ; 

名 了 解 注册 域名 、 申 请 空间 和 站 点 上 传 的 操作 方法 ; 

名 了 解 站 点 维护 与 推广 的 相关 知识 。 


10.1 站 点 测试 


网 站 制作 完成 后 ,需要 经 过 反复 测试 .审核 ,修改 ,直到 无 误 后 才 可 以 正式 发 布 。 实 际 
上 ,在 网 站 建设 过 程 中 ,就 应 该 经 常 对 站 点 进行 测试 并 解决 所 发 现 的 问题 ,以 便 尽 早 发 现 
问题 ,避免 重复 出 错 。 在 对 站 点 进行 测试 时 ,应 该 注意 以 下 几 个 方面 的 问题 。 

(1) 在 不 同 的 浏览 器 .不同 的 分 辩 率 不 同 的 操作 系统 中 预览 站 点 页 面 ,查看 布局 \ 颜 
色 、 字 体 大 小 有 无 混乱 的 现象 。 

(2) 检查 站 点 是 否 有 断 开 的 链接 ,各 个 栏目 内 容 与 图 片 是 否 对 应 。 

(3) 监测 页 面 的 文件 大 小 以 及 下 载 这 些 页 面 所 占用 的 时 间 。 

(4) 验证 代码 ,以 定位 标签 或 语法 错误 。 

(5) 测试 是 否 按照 客户 要 求 进行 功能 实现 ;数据 库 是 否 链接 正常 ;各 个 动态 生成 链接 
是 否 正确 ;传递 参数 .内容 是 否 正确 。 

(6) 测试 人 员 不 应 仅 限于 网 站 开发 人 员 , 应 适度 扩大 测试 范围 ,以 得 到 客观 ,全 面 的 
评价 。 

(7) 网 站 发 布 到 服务 器 之 后 还 需 进 行 测试 ,主要 防止 因 环境 不 同 导致 的 错误 。 
10.1.1 浏览 器 兼容 性 测试 


随 着 时 间 的 推移 ,IE、Firefox 和 Opera 等 浏览 器 对 CSS 的 支持 度 越 来 越 高 ,但 它们 
仍 在 符合 标准 的 基础 上 存在 差异 。 在 这 种 情况 下 ,网 页 设计 制作 人 员 只 有 不 断 地 进行 测 
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试 ,不 断 地 充分 了 解 各 个 浏览 器 才能 让 页 面 正确 显示 在 各 个 浏览 器 中 。 

Dreamweaver CS6 提供 的 浏览 器 兼容 性 检查 功能 可 以 帮助 设计 者 在 浏览 器 中 查找 
有 问题 的 HTML 和 CSS 部 分 ,并 提示 设计 者 哪些 标签 、 属 性 在 浏览 器 中 可 能 出 现 问 题 ， 
以 便 对 文档 进行 修改 。 

默认 情况 下 ,浏览 器 兼容 性 检查 功能 可 以 对 Firefox 1. 5、Internet Explorer 6. 0/7. 0、 
Netscape Navigator 8. 0、Opera 8. 0/9.0 以 及 Safari 2.0 浏览 器 进行 兼容 性 检查 ,其 主要 
步骤 如 下 。 

(1) 在 Dreamweaver CS6 中 打开 待 检 查 的 网 页 文档 ,然后 在 菜单 栏 中 执行 “窗口 ”一 
“结果 ”一 “浏览 器 兼容 性 ”命令 ,打开 “结果 ”面板 。 

(2) 在 “结果 ”面板 中 选择 “浏览 器 兼容 性 ”选项 卡 , 然 后 单 击 “ 结 果 ” 面 板 左 上 角 的 绿 
色 箭 头 ,在 弹出 的 子 菜单 中 选择 “设置 "选项 ,弹出 如 图 10-1 所 示 的 对 话 框 。 


浏览 器 最 低 版 本 @) 
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Internet Explorer 
Netscape 






































图 10-1 “目标 浏览 器 "对 话 框 


(3) 根据 实际 情况 ,选中 目标 浏览 器 旁边 的 复 选 框 ,对 于 每 个 选 定 的 浏览 器 ,从 相应 
的 下 拉 菜 单 中 选择 要 检查 的 最 低 版 本 .最 后 单 击 “ 确 定 ” 按 钮 ,经 过 一 段 时 间 的 检查 ,软件 
将 检查 出 来 的 潜在 问题 罗列 在 窗 格 中 ,如 图 10-2 所 示 。 





ea 


中 








TE 











图 10-2 浏览 器 兼容 性 检查 


(4) 在 图 10-2 中 ,每 个 潜在 问题 前 面 都 有 一 个 填充 的 圆 ,用 于 表示 当前 错误 发 生 的 
可 能 性 ,1/4 填充 的 圆 表 示 可 能 发 生 ,完全 填充 的 圆 表 示 非 常 可 能 发 生 。 双 击 检查 出 来 的 
潜在 问题 ,软件 将 自动 快速 定位 到 该 问题 所 在 位 置 , 供 设计 人 员 进 行 修改 。 


10.1.2 链接 的 测试 


在 浏览 网 页 的 时 候 ,读者 一 定 都 遇 到 过 ”无 法 找到 网 页 ”的 提示 ,出 现 此 现象 的 原因 一 
般 是 由 链接 文件 的 位 置 发 生变 化 、 被 误 删除 或 者 文件 名 的 拼写 错误 而 造成 的 。 为 了 避免 
出 现 失效 链接 的 敌 估 ,树立 良好 的 网 站 形象 ,无 论 是 发 布 前 的 本 地 测试 ,还 是 发 布 后 的 远 
程 测试 ,都 应 该 认真 地 检查 是 否 存在 失效 链接 ,以 便 及 时 修改 。 


1. 检查 链接 

Dreamweaver CS6 提供 的 “检查 链接 ”功能 可 以 
检查 当前 打开 的 文件 ,本 地 站 点 的 某 一 部 分 或 者 整个 
本 地 站 点 中 断 开 的 链接 和 孤立 文件 ,具体 的 操作 方法 
如 下 。 

(1) 启动 Dreamweaver CS6 .在 “文件 ?面板 中 选 
择 需 要 检查 链接 的 站 点 名 称 ,如 图 10-3 所 示 。 

(2) 在 菜单 栏 中 执行 “窗口 ”一 “结果 ”一 “链接 
检查 器 "命令 ,进入 “结果 "面板 中 的 “链接 检查 器 ” 
选项 卡 。 单 击 面板 左上 角 的 加 按钮 ,根据 需要 在 
弹出 的 子 菜单 中 选择 对 应 的 选项 ,这 里 选择 “检查 
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图 10-3 ”选择 需要 检查 链接 的 站 点 


整个 当前 本 地 站 点 的 链接 ”选项 。 稍 等 片刻 , 即 可 在 面板 中 看 到 检查 结果 ,如 图 10-4 


所 示 。 























图 10-4 ”检查 结果 





此 外 ,用 户 可 以 在 图 10-4 所 示 面 板 中 的 “显示 ”下 拉 列 表 框 中 选择 要 检查 链接 的 


方式 。 


(1) 断 掉 的 链接 : 检查 文档 中 是 否 存 在 断 掉 的 链接 ,这 是 默认 选项 。 


(2) 外 部 链接 : 检查 稳定 中 的 外 部 链接 是 否 有 效 。 


(3) 孤立 文件 : 检查 站 点 中 是 否 存在 孤立 文件 ,此 选项 只 有 在 检查 整个 站 点 时 才 被 


激活 。 
2. 修复 链接 


在 对 站 点 进行 链接 检查 后 ,用 户 可 以 直接 在 “链接 检查 器 ”面板 中 修复 链接 ,也 可 以 在 
属性 检查 器 中 修复 链接 。 这 里 以 修复 “ 断 掉 的 链接 ”为 例 进行 讲解 。 

(1) 在 “链接 检查 器 ”面板 中 修复 链接 。 在 “链接 检查 器 ”面板 中 的 “ 断 掉 的 链接 ” 列 
内 ,选择 某 个 断 开 的 链接 。 此 时 ,可 以 在 “ 断 掉 的 链接 ” 列 中 直接 输入 正确 的 链接 地 址 ,或 
者 单 击 链接 地 址 旁边 的 文件 夹 图 标 , 在 弹出 的 对 话 框 中 选择 正确 的 链接 地 址 ,如 图 10-5 


所 示 。 


(2) 在 属性 面板 中 修复 链接 。 在 “链接 检查 器 ?面板 中 ,双击 “文件 ? 列 中 的 需要 修复 
链接 的 文件 名 称 。 此 时 ,软件 自动 打开 待 修复 链接 所 在 的 文档 ,并 在 属性 面板 中 高 亮 显示 
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ry 8 个 HTML ，6 个 孤立 文件 。 总 共 562 个 链接 ,520 个 正确 ，62 个 断 接 ,0 个 外 部 链接 
图 10-5 在 “链接 检查 器 ”面板 中 修复 链接 





路 径 和 文件 名 ,如 图 10-6 所 示 , 在 “链接 ”文本 框 中 直接 输入 正确 的 链接 地 址 ,或 者 单 击 该 
文本 框 右 侧 的 文件 夹 图 标 , 在 弹出 的 对 话 框 中 选择 正确 的 链接 地 址 即 可 。 
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图 10-6 在 属性 面板 中 修复 链接 


10.2 站 点 上 传 


网 站 制作 完成 后 ,需要 将 站 点 上 传 至 远 端 服 务 器 上 ,这 样 接 入 互联 网 的 所 有 用 户 都 可 
以 浏览 网 站 了 。 在 站 点 上 传 之 前 ,应 该 在 网 上 注册 一 个 域名 ,申请 一 定 的 空间 ,最 后 借助 
软件 工具 将 网 站 上 传 至 服务 器 上 。 


10.2.1 注册 域名 


域名 (Domain Name) 是 互联 网 上 的 一 台 服 务 器 或 一 个 网 络 系统 的 名 字 , 它 由 一 串 用 
点 分 隔 的 名 字 组 成 ,在 全 世界 域名 具有 唯一 性 。 
国内 有 许多 正规 的 大 型 域名 申请 机 构 , 如 新 网 (http://www. xinnet. com/)、 万 网 
(http://www. net. cn/)、 新 网 互联 (http://www. dns. com. cn/) 和 35 互联 (http:// 
www. 35. com/) 等。 同样 ,国外 也 有 非常 著名 的 域名 申请 机 构 , 如 godaddy (http:// 
www. godaddy. com/) 和 enom(http://www. enom. com/) 等 。 

根据 我 国 互 联网 域名 管理 办 法 ,域名 注册 申请 者 应 当 提 交 真 实 \ 准 确 、 完 整 的 域名 注 
册 信 息 , 对 于 未 实名 验证 审核 的 国内 域名 ,域名 提供 机 构 将 暂停 域名 的 解析 功能 。 国 内 中 
英文 域名 注册 的 一 般 流 程 如 图 10-7 所 示 。 

下 面 以 在 新 网 上 注册 域名 为 例 ,演示 注册 域名 的 具体 过 程 。 

(1) 登录 新 网 主页 , 单 击 页 面 导航 栏 中 的 “域名 注册 ”文字 链接 ,进入 域名 注册 





页 面 。 
(2) 在 此 页 面 中 首先 要 选择 注册 域名 的 类 别 , 这 里 选择 . com. cn 类 别 , 该 类 别 的 价格 
为 100 元/ 年, 单 击 “ 购 买 ”按钮 后 ,进入 英文 域名 注册 页 面 。 
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登录 域名 提供 机 构 的 网 站 
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图 10-7 域名 注册 的 一 般 流程 


(3) 在 此 页 面 中 ,申请 人 需要 先 查询 一 下 拟 注册 的 域名 是 否 已 经 被 注册 。 在 文本 框 
中 输入 要 查询 的 英文 域名 ,在 下 方 复 选 框 中 可 以 选中 多 个 类 型 ,最 后 单 击 “查询 ”按钮 即 
可 ,如 图 10-8 所 示 。 查 询 结果 如 图 10-9 所 示 。 
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所 有 者 详情 访问 该 网 站 >> 
10-9 域名 查询 结果 


(4) 在 域名 查询 结果 中 ,选中 要 注册 的 域名 ,并 单 击 后 方 的 “注册 ”文字 链接 ,进入 选 
择 价格 并 填写 信息 环节 。 

(5) 在 填写 完 各 种 资料 后 , 单 击 页 面 下 方 的 “注册 ”按钮 即 可 完成 形式 上 的 注册 。 此 
时 注册 的 域名 并 没有 生效 ,申请 人 还 需 将 有 关 资 料 原件 和 复印 件 邮寄 至 域名 注册 服务 提 
供 商 , 待 审 核 通过 后 域名 才 真 正 注册 成 功 。 

需要 特别 提醒 的 是 ,目前 国内 英文 域名 和 国内 中 文 域名 仅 限 企业 用 户 注册 ,个 人 用 户 
不 能 注册 。 


10.2.2 申请 网 站 空间 


网 站 空间 就 是 互联 网 中 存放 网 站 内 容 的 空间 。 购 买 网 站 空间 后 ,一般 注 册 商 会 给 空 
间 分 配 一 个 IP, 这 个 IP 就 是 域名 要 解析 到 的 IP。 

1. 网 站 空间 常见 形式 

目前 常见 的 网 站 空间 有 以 下 几 种 形式 。 

1) 自 建 服务 器 

自 建 服 务 器 需要 较 高 水 平 的 软 硬 件 专业 技术 人 员 , 要 投入 较 大 的 资金 购置 软 硬 件 设 
备 , 还 要 向 当地 Internet 接 和 人 商 支 付 价格 不 非 的 日 常 维护 和 线路 通信 费 , 建 设 周 期 相对 较 
长 。 因 为 费用 昂贵 ,这 种 形式 适合 那些 有 实力 的 大 中 型 企业 和 专门 的 ISP(Internet 
Service Provider, 互 联网 服务 提供 商 ) 。 

2) 服务 器 托管 

与 自 建 服 务 器 不 同 ,服务 器 托管 是 将 自己 购置 的 服务 器 及 其 相关 设备 托管 到 具有 完 
善 机 房 设施 和 运营 经 验 的 网 络 数据 中 心 内 ,以 便 使 系统 达到 安全 可靠、 稳定 、 高 效 运行 的 
目的 。 这 种 形式 适合 中 小 型 企业 使 用 。 

3) 服务 器 租用 

服务 器 租用 这 种 方式 ,用 户 无 须 自己 购置 设备 ,而 是 租用 服务 商 提供 的 硬件 设备 ,由 
服务 商 负责 基本 软件 的 安装 .配置 ,并 保证 基本 服务 功能 正常 运行 。 相 对 于 前 两 种 方式 ， 
服务 器 租用 方式 的 费用 有 所 降低 ,适合 中 小 型 企业 使 用 。 

4) 虚拟 主机 

虚拟 主机 是 指 把 一 台 运 行 在 互联 网 上 的 真实 主机 资源 ,划分 成 多 台 “ 虚 拟 ” 的 服务 器 ， 


每 一 台 虚 拟 主机 都 具有 独立 的 域名 和 完整 的 Internet 服 
务 器 功能 ,每 个 用 户 承受 的 硬件 费用 、 网 络 维护 费用 .通信 
线路 的 费用 都 大 幅 降低 。 它 是 目前 最 常见 的 获取 网 站 空 
间 的 方式 。 


2. 虚拟 主机 购买 的 一 般 流程 

虚拟 主机 的 购买 一 般 包 括 注 册 和 开通 两 个 阶段 。 首 
先 ,按照 网 站 空间 服务 提供 商 的 要 求 填写 相关 信息 ;其 次 ， 
根据 实际 需要 选择 服务 提供 商 所 提供 的 不 同类 型 的 产品 ， 
待 确定 好 所 需要 的 产品 类 型 并 缴纳 所 需 费 用 后 即 可 开通 
网 站 空间 ,流程 如 图 10-10 所 示 。 虚 拟 主机 开通 后 ,还 须 
登录 服务 商 提供 的 虚拟 主机 管理 系统 将 之 前 申请 的 域名 
与 主机 绑 定 , 如 图 10-11 所 示 , 这 样 任何 人 就 可 以 通过 域 
名 访问 站 点 了 。 
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图 10-11 35 互联 的 虚拟 主机 管理 系统 


10.2.3 内 容 上 传 


站 点 上 传 就 是 将 通过 测试 后 的 网 站 复制 到 远程 Web 服务 器 的 过 程 ,这 样 访问 者 才能 
通过 浏览 器 浏览 存储 于 服务 器 上 的 网 页 。 上 传 站 点 一 般 是 通过 FTP 类 软件 连接 到 
Internet 服务 器 后 进行 上 传 的 ,当然 也 可 以 通过 Dreamweaver 的 站 点 管理 器 上 传 网 页 。 


1. 通过 Dreamweaver 上 传 


通过 Dreamweaver 将 本 地 站 点 上 传 至 远程 服务 器 上 ,需要 在 传输 之 前 对 站 点 服务 器 


进行 相关 设置 ,具体 操作 步骤 如 下 。 


(1) 启动 Dreamweaver CS6, 在 “文件 ”面板 中 的 “文件 ”下 拉 列 表 框 中 选择 需要 上 传 


~ 
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的 站 点 名 称 。 
(2) 在 菜单 栏 中 执行 “站 点 ”管理 站 点 ”命令 ,打开 ”管理 站 点 ”对话 框 ,如 图 10-12 
所 示 。 


























混 纱 土 结构 工程 施工 捍 体 库 








图 10-12 “管理 站 点 "对 话 框 


(3) 在 “管理 站 点 ”对 话 框 中 ,选择 要 上 传 的 站 点 名 称 ,然后 单 击 “ 编 辑 ” 按 钮 。 
(4) 此 时 弹出 * 站 点 设置 对 象 " 对 话 框 。 在 此 对 话 框 左 侧 列表 中 选择 “服务 器 ”选项 ， 
如 图 10-13 所 示 。 





图 10-13 站 点 设置 对 象 一 一 服务 器 


(5) 在 图 10-13 所 示 的 对 话 框 中 , 单 击 “添加 新 服务 器 "按钮 号 ,或 者 选择 一 台 现 有 的 
服务 器 ,然后 单 击 * 编 辑 现 有 服务 器 ?按钮 出 , 即 可 对 服务 器 进行 设置 。 这 里 单 击 * 添 加 新 
服务 器 ”按钮 一 ,添加 一 台新 服务 器 ,此 时 弹出 如 图 10-14 所 示 的 对 话 框 。 
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图 10-14 设置 参数 


(6) 在 该 对 话 框 的 “服务 器 名 称 ” 文 本 框 中 输入 新 服务 器 的 名 称 。 在 “连接 方法 ”下 拉 
列表 框 中 选择 FTP 选项 ,并 在 下 方 的 “FTP 地 址 “用户 名 ”和 “密码 ”文本 框 中 输入 相关 
信息 。 在 “ 根 目录 ”文本 框 中 输入 远程 服务 器 上 用 于 存储 公开 显示 的 文档 的 目录 。 参 数 设 
置 完成 的 界面 如 图 10-15 所 示 。 


218.198.57.196 [2: ] 
lw | 
(ee 四 





图 10-15 参数 设置 完成 


(7) 为 保证 能 成 功 连接 到 服务 器 , 单 击 * 测 试 ?按钮 ,测试 FTP 地 址 、 用 户 名 和 密码 是 
否 正 确 ,测试 过 程 如 图 10-16 所 示 的 对 话 框 。 




















10-16 正在 连接 Web 服务 器 
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(8) 如 果 还 需 设 置 更 多 选项 , 单 击 * 更 多 选项 "文字 链接 进一步 设置 ,这 里 保持 默认 设 
管 即 可 。 

(9) 待 服务 器 测试 成 功 后 , 单 击 “ 保 存 ” 按 钮 ,返回 “站 点 设置 对 象 " 对 话 框 。 根 据 需 要 
在 “服务 器 "类别 中 ,指定 刚 添加 的 服务 器 为 远程 服务 器 、 测 试 服务 器 ,还 是 同时 为 这 两 种 
服务 器 ,如 图 10-17 所 示 。 待 所 有 设置 完成 后 , 单 击 * 保 存 ? 按 钮 ,返回 软件 主 界面 。 





图 10-17 指定 服务 器 类 型 


(10) 在 “文件 ”面板 中 , 单 击 “ 连 接 到 远 端 主机 ”按钮 ,如 图 10-18 所 示 , 即 可 连接 到 服 
务 器 。 


展开 以 显示 本 
地 和 远 端 站 点 





剧 下 上 取 存 同 
新 载 传 出 回 步 


图 10-18 相关 上 传 的 按钮 


为 了 更 加 直观 地 进行 上 传 操作 , 单 击 * 展 开 以 显示 本 地 和 远 端 站 点 "按钮 。 此 时 ,软件 
整个 界面 变 为 两 个 窗 格 的 布局 , 左 侧 窗 格 用 于 显示 远程 服务 器 中 的 文件 目录 , 右 侧 窗 格 用 
于 显示 本 地 文件 的 目录 。 在 右 侧 窗 格 中 选择 整个 站 点 或 某 些 文件 , 单 击 * 上 传 "按钮 合 , 即 
可 将 文件 上 传 到 服务 器 中 ,如 图 10-19 所 示 。 

如 果 需 要 从 远 端 站 点 下 载 某 些 文件 ,可 将 它们 从 “远程 服务 器 " 窗 格 中 拖 忠 到 “本 地 文 
件 ” 窗 格 中 ,或 者 单 击 “ 下 载 " 按 钮 即 可 。 男 外 ,由 于 网 络 速 度 的 不 同 ,上 传 或 下 载 全 部 站 点 
文件 需要 经 过 一 段 时 间 的 等 待 。 

2. 通过 FTP 类 软件 上 传 


通过 FTP 类 软件 (如 CuteFTP、FlashFXP 和 LeapFXP 等 ) 上 传 文件 是 常用 的 上 传 
方式 , 它 不 仅 效率 高 ,支持 断 电 续 传 ,可 以 跳 过 指定 的 文件 类 型 ,还 可 以 缓存 远 端 文件 夹 列 
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图 10-19 站 点 管理 窗口 


表 , 具 有 避免 空闲 等 多 种 功能 ,对 于 上 传 那些 内 容 较 多 的 文档 非常 便利 。 下 面 详细 介绍 使 
用 FlashFXP 上 传 文件 的 操作 方法 。 pp 

(1) 启动 FlashFXP, 在 菜单 栏 中 执行 “站 点 ”一 “站 
点 管理 器 "命令 ,打开 “站 点 管理 器 "窗口 。 单 击 窗 口 左 
下 角 的 “新 建站 点 "按钮 ,在 弹出 的 “创建 新 的 站 点 ”对 话 
框 中 输入 站 点 名 称 myweb, 如 图 10-20 所 示 。 图 10-20 输入 站 点 名 称 

(2) 单 击 “ 确 定 ” 按 钮 ,返回 “站 点 管理 器 ”窗口 。 选 
择 刚才 新 建 的 站 点 ,输入 IP 地 址 ,用 户 名 称 、 密 码 等 信息 ,然后 单 击 “ 应 用 ”按钮 ,如 
图 10-21 所 示 。 单 击 “ 连 接 ” 按 钮 . 即 可 连接 到 远程 站 点 。 








站 点 管理 器 


量 mr Cooputer 项 | 传输] 高 级 [ss | 书签 | 
© quick Connect 
9 PiashFyP Sites 站 点 名 称 Dleyveb 














二 
于 地 址 ||218.198.57.196 




















用 户 名 称 D [rE 

间 则 四 
远程 路 径 0) 
本 地 路 径 {L) [wi 来 科 \ 各 共同 3] 
[到 


inknown Time Zone / Use Server Time 























Ed 
四 



































图 10-21 输入 站 点 信息 
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(3) 连接 成 功 后 ,在 界面 的 左 侧 窗 格 中 选择 需要 上 传 的 文件 或 文件 夹 , 右 击 , 在 弹出 
的 右键 菜单 中 选择 “传输 ”命令 ,或 者 直接 将 选中 的 文件 或 文件 夹 拖 放 到 右 侧 窗 格 远程 服 
务 器 相应 的 目录 下 ,如 图 10-22 所 示 。 
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图 10-22 正在 上 传 文件 


至 此 ,通过 Dreamweaver 上 传 的 方法 和 使 用 FTP 类 软件 上 传 的 操作 方法 已 经 介绍 
完了 ,更 多 的 操作 过 程 这 里 不 再 袭 述 ,读者 可 亲自 体会 学 习 。 


10.3 维护 与 推广 


随 着 网 络 应 用 的 深入 和 网 络 营 销 的 普及 ,网 站 建设 并 非 一 次 性 投资 建立 一 个 网 站 那 
么 简单 ,更 重要 的 工作 在 于 网 站 建成 后 的 长 期 维护 、 更 新 及 推广 过 程 。 


站 点 维护 


网 站 的 维护 是 一 项 专业 性 较 强 的 工作 ,其 维护 的 内 容 种 类 也 非常 多 ,如 页 面 修改 、 功 
能 改进 、 安 全 管理 ,资料 备份 .网 站 推广 等 。 


1. 服务 器 及 相关 硬件 的 维护 

服务 器 、 路 由 器 和 交换 机 以 及 通信 设备 是 网 络 的 关键 设备 ,对 这 些 硬件 的 维护 主要 是 
对 硬件 的 运行 状况 进行 监控 ,以 确保 网 站 的 24 小 时 不 间断 正常 运行 ,发 现 运 行 问题 及 时 
解决 。 

相对 于 普通 PC 来 说 ,服务 器 在 稳定 性 、 安 全 性 \、 性 能 等 方面 都 要 求 更 高 ,CPU、 芯 片 
组 内存、 磁盘 系统 、 网 络 等 硬件 和 普通 PC 有 所 不 同 。 而 放置 这 些 硬件 设备 的 机 房 要 保 
持 室内 正常 的 温度 和 湿度 以 及 良好 的 通风 性 ,并 确保 电力 系统 的 正常 运转 ,因为 这 些 因素 
将 影响 服务 器 散热 和 性 能 的 正常 发 挥 。 


10.3.1 
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2. 操作 系统 的 维护 

操作 系统 并 不 是 绝对 安全 的 ,服务 器 操作 系统 设置 得 是 否 合理 是 网 站 能 否 长 期 良好 
运行 的 保证 。 维 护 操作 系统 的 安全 必须 及 时 为 系统 更 新 升级 ,操作 系统 中 的 软件 应 该 遵 
循 “ 少 而 精 " 的 原则 ,这 样 不 仅 可 以 防止 各 个 软件 之 间 相 互 冲突 ,还 可 以 避免 因 软 件 存 在 漏 
洞 而 引起 被 攻击 的 危险 。 

3. 数据 备份 

在 实际 的 网 络 环境 中 没有 人 能 够 保证 系统 不 出 现任 何 安全 问题 ,如 服务 器 零件 损坏 、 
断 线 或 者 被 黑客 攻击 等 ,这 时 数据 的 备份 与 恢复 就 显得 十 分 重要 。 对 于 那些 经 常 更 新 的 
网 站 来 说 ,定期 备份 更 为 重要 ,在 无 人 值守 的 环境 下 ,通过 FTP 自动 备份 网 站 数据 ,能 够 
确保 网 站 “有 备 无 患 ”。 

4. 网 站 内 容 更 新 

由 于 搜索 引擎 对 新 的 信息 非常 敏感 ,所 以 只 有 不 断 地 更 新 内 容 ,才能 保证 网 站 的 生命 
力 , 进 而 获得 更 为 长 久 的 利益 。 网 站 内 容 更 新 越 多 越 快 ,搜索 引擎 会 认为 网 站 生机 勃 勃 ， 
在 提供 给 搜索 者 信息 的 时 候 , 搜 索引 擎 会 认为 网 站 值得 推荐 ,自然 被 排 在 搜索 结果 的 前 
列 。 下 面 以 企业 型 网 站 为 例 说 明 网 站 内 容 更 新 需要 注意 的 内 容 。 

(1) 更 新 企业 动态 .完善 相关 内 容 。 

(2) 网 站 原 有 栏目 内 容 的 增添 与 完善 。 网 站 建设 初期 ,企业 对 网 站 的 投资 可 能 并 不 
大 ,但 随 着 网 站 的 运行 与 推广 ,企业 肯定 会 考虑 增添 某 些 功能 或 添加 更 多 的 产品 或 服务 
信息 。 

(3) 风格 和 版 面 布局 的 更 新 调整 。 风 格 是 一 个 网 站 或 企业 形象 ,最 好 不 要 频繁 变动 ， 
但 这 并 不 意味 着 永远 不 变 。 风 格 和 版 面 布 局 调整 ,可 以 是 全 部 改版 更 新 ,也 可 以 是 局 部 栏 
目 、 局 部 页 面 上 的 改进 。 

(4) 产品 信息 的 更 新 。 随 着 企业 的 发 展 , 肯 定 会 有 新 产品 、 新 服务 推出 。 此 外 ,销售 
价格 、 销 售 策略 .促销 信息 等 内 容 也 都 需要 及 时 更 新 。 

(5) 及 时 回复 客户 留言 与 疑问 的 解答 。 


10.3.2 网 站 推广 


网 站 推广 是 指 通过 一 定 的 技术 和 方法 将 网 站 推广 出 去 ,达到 一 定 的 知名 度 ,进而 产生 
经 济 效益 。 常 见 的 网 站 推广 方案 有 以 下 几 个 方面 。 


1. 大 众 传媒 推广 
大 众 传媒 主要 包括 电视 户外 广告 .报纸 杂志 以 及 其 他 印刷 品 等 内 容 , 利 用 这 些 手 段 
能 够 让 客户 在 短 时 间 内 加 深 对 网 站 的 了 解 。 


2. 搜索 引擎 推广 

搜索 引擎 推广 是 指 利用 搜索 引擎 .分 类 目录 等 具有 在 线 检索 信息 功能 的 网 络 工具 进 
行 网 站 推广 的 方法 。 这 种 推广 方法 又 有 多 种 不 同 的 形式 ,常见 的 有 搜索 引擎 优化 .关键 词 
告 . 关 键 词 竞 价 排名 、 网 页 内 容 定位 广告 
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3. 电子 邮件 推广 

电子 邮件 推广 主要 以 电子 邮件 的 方式 ,将 会 员 通 信 、 电 子 刊物 等 广告 发 送 给 用 户 , 增 
强 与 客户 的 关系 ,提高 品牌 的 忠诚 度 。 但 是 未 经 用 户 许可 的 滥 发 邮件 ,必定 给 用 户 留 下 不 
好 的 印象 ,对 提升 网 站 的 访问 量 没有 实质 性 帮助 。 


4. 交换 链接 推广 

交换 链接 是 最 简单 的 一 种 合作 方式 ,也 是 新 兴 网 站 推广 的 有 效 方式 之 一 。 它 在 具有 
优势 互补 的 网 站 之 间 建 立 起 简单 的 合作 形式 ,分 别 在 自己 的 网 站 上 放置 对 方 网 站 的 Logo 
或 网 站 名 称 并 设置 对 方 网 站 的 超 链接 ,使 用 户 可 以 从 合作 网 站 中 发 现 自己 的 网 站 ,达到 相 
互 推广 的 目 。 

5. 微 信 、 博 客 和 二 维 码 推广 

在 微 信和 博客 中 发 表 观 点 是 一 种 很 好 的 宣传 网 站 的 方式 。 另 外 ,智能 手机 和 条 形 码 
或 二 维 码 扫描 应 用 被 广泛 采用 后 ,利用 二 维 码 的 消费 者 大 大 增加 ,利用 二 维 码 传递 站 点 信 
息 也 是 非常 好 的 做 法 。 


10.4 习题 


.站 点 测试 主要 包含 哪些 内 容 ? 

. 如何 使 用 Dreamweaver 实现 文件 上 传 ? 
.网 站 空间 的 常见 形式 有 哪些 ? 
.什么 是 虚拟 机 租用 ? 

， 简 述 站 点 维护 的 主要 内 容 。 

.网 站 推广 的 方法 有 哪些 ? 
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综合 案例 解析 一 一 电子 商务 网 站 


【本 章 导读 】 

本 章 以 设计 并 实现 电子 商务 类 网 站 的 前 台 过 程 为 依托 ,对 整 本 书 的 知识 进行 汇总 、 串 
接 ,侧重 知识 的 迁移 和 设计 思路 的 延续 。 

【学 习 目标 】 

局 了 解 建设 网 站 前 的 相关 工作 ; 

如 掌握 页 面前 期 布局 规划 的 思路 和 方法 ; 

如 能 够 掌握 网 站 静态 页 面 开 发 的 全 过 程 。 


11.1 电子 商务 网 站 的 简易 需求 分 析 


在 进行 网 站 设计 之 前 需要 对 网 站 的 系统 功能 进行 详细 分 析 , 以 确保 最 终 网 站 能 够 符 
合 客 户 需 求 。 

1. 网 站 简 述 

电子 购物 网 站 是 集 商 品 展示 、 商 品 搜索 、 商 品 购买 于 一 体 的 大 型 网 站 ,具有 品种 齐全 、 
功能 完善 .操作 简便 等 优点 。 

2. 需求 分 析 

1) 购物 网 首页 

展示 网 站 总 体 布局 ,发 挥 导航 作用 。 它 包括 商品 分 类 模块 .个 人 登录 模块 、 最 新 消息 
模块 .最 新 商品 推荐 模块 特价 商品 模块 、 人 气 商 品 模块 商品 搜索 模块 .商品 排行 模块 等 。 
以 上 模块 便于 顾客 了 解 购物 网 站 的 主要 功能 ,为 顾客 提供 方便 快捷 的 操作 。 

2) 商品 搜索 页 

电子 购物 网 站 中 的 商品 对 于 顾客 来 讲 无 异 于 一 个 商品 的 海洋 ,要 想 在 众多 产品 
中 选择 符合 客户 意愿 的 商品 ,商品 搜索 功能 必 不 可 少 。 顾客 可 以 通过 输入 关键 字 进 
行 快速 查找 ,检索 自己 需要 的 商品 ,这 些 商 品 以 列表 的 形式 展现 在 顾客 面前 , 供 顾 客 

3) 商品 展示 页 面 

顾客 如 果 想 要 查看 商品 的 详细 信息 ,就 需要 进入 商品 展示 页 面 。 该 页 面包 含 商 品 的 
各 种 详细 信息 ,顾客 可 以 根据 商品 的 展示 说 明 来 选择 是 否 购买 。 
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4) 性 能 需求 
由 于 整个 网 站 涉及 大 量 的 商品 信息 以 及 用 户 信息 发 布 ,要 求 信息 输入 、 修 改 、 删 除 操 
作 延 迟 时 间 短 。 搜 索 操作 要 求 得 到 大 量 数 据 结构 时 延迟 不 能 太 长 。 


11.2 电子 商务 网 站 的 布局 分 析 


“ 宇 泽 美食 ”是 以 在 线 销售 各 类 美食 为 主 的 购物 平台 ,主要 包括 主页 面 \ 搜 索 页 面 和 产 
品 详细 信息 页 面 3 部 分 ,这 里 针对 这 3 个 页 面 进行 分 析 。 

1. 主页 面 布局 规划 

主页 面 应 该 包括 网 站 的 Logo、 导 航 、 产 品 搜索 框 \. 个 人 账户 、 产 品 分 类 、 部 分 产品 推 
荐 ,以 及 广告 位 等 栏目 。 通 过 成 熟 的 构思 与 设计 光宇 泽 美食 ”主页 面 最 终 效 果 如 图 11-1 
所 示 ,布局 如 图 11-2 所 示 。 





宇 泽 美食 


YUZEF00D 











2. 搜索 页 面 布 局 规划 

搜索 页 面 是 访问 者 在 搜索 栏 中 输入 关键 字 后 ,通过 系统 搜索 找 出 符合 条 件 的 产品 列 
表 页 面 。 通 过 成 熟 的 构思 与 设计 ,“ 宇 泽 美食 ”搜索 页 面 最 终 效果 如 图 11-3 所 示 ,布局 如 
图 11-4 所 示 。 
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图 11-2 主页 面 布局 示意 图 
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图 11-3 搜索 页 面 最 终 效果 


3. 产品 详细 信息 页 面 布局 规划 
产品 详细 信息 页 面 是 访问 者 查看 具体 产品 时 显示 的 页 面 ,通过 成 熟 的 构思 与 设计 ， 
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图 11-4 搜索 页 面 布局 示意 图 


“ 宇 泽 美 食 ” 产 品 详细 信息 页 面 最 终 效果 如 图 11-5 所 示 ,布局 如 图 11-6 所 示 。 
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图 11-5 产品 详细 信息 页 面 最 终 效果 
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图 11-6 产品 详细 信息 页 面 布局 示意 图 


11.3 实现 过 程 


在 制作 页 面 之 前 ,首先 ,定义 站 点 ,以 方便 对 站 点 内 的 文件 进行 管理 和 操作 。 其 次 ,在 
站 点 中 创建 images 和 style 两 个 文件 夹 ,用 于 放置 图 片 和 样式 文件 。 最后, 新建 index. 
html 文档 和 style. css 文档 ,并 将 两 个 文档 链 





body, div, address, blockquote, iframe, ul, ol, 


接 起 来 。 在 完成 了 这 些 准备 工作 以 后 ,下 面 分 | ae aa aaa eal 
别 对 各 个 页 面 的 布局 实现 进行 讲解 。 i a 


margin: 07 





1, h2, h3, h4, ,table, 


padding: 0; 


| 主页 的 实现 font-style: normal; 


font: 12px/1.5 Arial, Helvetica, sans-serif; 
1. 页 面 头 部 区 域 的 制作 ol, v1, 11 (ist-style: none;) 
QD 在 style. ess 文件 中 ,创建 CSS 初始 | verse Cemsgns ma 
人 eee toeenet eee 
(2) 切换 到 设计 视图 ,在 “插入 ”面板 的 | (clear: borh?) 


“常用 ”类 别 中 单 击 “ 插 入 Div 标签 "按钮 国 , 弹 | et900000: 

出 “插入 Div 标签 ”对 话 框 。 在 “插入 ”下 拉 列 上 .wove 。 

表 框 中 选择 “在 插入 点 ”选项 ,在 ID 文本 框 中 ey ened 
输入 wrapper, 最 后 单 击 “确定 ”按钮 , 即 可 在 lecay ， 

页 面 中 插入 wrapper 容器 。 切 换 到 style css | Seeroromas fsraee; 
文件 中 ,创建 相关 CSS 规则 ,如 图 11-8 所 示 。 | mr 


(3) 删除 wrapper 容器 内 多 余 的 文字 ,在 图 11-7 CSS 初始 化 规则 
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图 11-8 ”wrapper 容器 的 CSS 规则 


该 容器 内 部 使 用 header 元 素 插入 一 个 名 为 page_header 的 容器 。 在 page_header 容器 内 
部 ,依次 创建 名 为 logo 和 header_right 的 DIV 容器 ,并 插入 图 像 和 相关 文字 内 容 , 具 体 页 
面 结构 如 图 11-9 所 示 。 


boay> 
<aiv id="wrapper"> 
<header id="page_ header"> 
<div id="logo"><img src="images/logo.ipg" width="240" height="90" /></div> 
<div id="header right"> 
<div id="top"><a href="#"> 我 的 账户 </a><span>1</span><a href="#"> 付 载 方 式 </a><span>1</span><a 
Ihrer-"#"> 最 新 消息 </a><span>1</span><a href="#"> 帮 助 中 心 </a><span>1</span> 咨 询 热线 :400-686-1234</div> 
</div> 
</header> 
|<vaiv> 
cboay> 








图 11-9 page_header 容器 的 内 容 


(4) 在 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-10 所 示 。 返 回 设计 视图 ,页 面 
效果 如 图 11-11 所 示 。 

(5) 在 top 容器 的 后 面 使 用 nav 元 素 插入 名 为 page_ 
nav 的 容器 ,再 利用 无 序列 表 在 该 容器 内 部 搭建 导航 栏 ， 
具体 结构 如 图 11-12 所 示 。 切 换 到 style. css 文件 中 ,创建 
相关 CSS 规则 ,如 图 11-13 所 示 。 


2. 主页 左 侧 导航 的 制作 

(1) 切换 到 设计 视图 , 单 击 “ 插 入 ”面板 中 的 “插入 Div 
标签 ”按钮 国 , 弹 出 “插入 Div 标签 ”对 话 框 ,在 “插入 ”下 拉 
列表 框 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 下 拉 列 表 框 
中 选择 二 header id= 王 "page_header" 二 选项 ,在 ID 文本 框 
中 输入 content, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 page_ 
header 容器 后 面 插入 content 容器 ,如 图 11-14 所 示 。 

(2) 在 content 容器 内 部 使 用 section 元 素 创建 名 为 
left_sidebar 的 容器 ,此 时 页 面 结构 如 图 11-15 所 示 。 返 回 图 11.10 页 面 头 部 的 CSS 规则 
style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-16 所 示 。 


Phage neader 1 
width: 1000px; 
height: 90px; 
padding-top: 10px; 

) 

#1ogo { 
width: 240px; 
height: 90px; 
float: left; 

} 

#header right { 
float: left; 
width: 750px; 
height: 90px; 
text-align: right; 

} 

#cop { 
height: 30px; 
width: 750px; 
background: #CCO; 
line-height: 30px; 

} 

#cop span { 
padding-left: Spx; 
Padding-right: Spx; 
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图 11-11 页 面 头 部 的 预览 效果 





pody> 
<div id="wrapper™> 
<header id="page header"> 
ogo"S (eing Sr]</div> 
eader right"> 
<div id="top">[a REesea</div> 
<nav id="page_nav"> 
<ul> 
<1li><a href="#"> 首 页 </a></1i> 
<li><a href="#"> 宇 泽 地 事 </a></1i> 
<1li><a href="#"> 购 物 指南 </a></1i> 
<1i><a href=" 间 "> 美食 鉴 富 </a></1i> 
<1li><a href="#"> 新 品 上 架 </a></1i> 
<1li><a href="#"> 特 色 专区 </a></1i> 
<li><a hre: "> 订阅 邮件 </a></1i> 



























<1i><a hre: > 联系 我 们 </a></1i> 
<1li><a href="#"> 送 货 地 区 </a></11> 
</ul> 
</nav> 
</div> 
</header> 
</div> 
</body> 








图 11-12 搭建 导航 栏 
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age nav + 
width: 750px; 
height: 60px; 
background: #d9cab21| 

} 

#page nav ul { 
padding: 20px 15px 

} 

#page nav ul 1i { 
float: left; 
margin-left: 18px; 

} 

#page nav ul liat 
Color: #462323; 
font-size: 16px; 
font-family: "黑体 "; 








图 11-13 导航 栏 的 CSS 规则 








[cheader id="pageh | 











插入 | 在 标签 之 后 
[3 - 
ID: [content - 








BR 














图 11-14 插入 content 容器 


boay> 
div id="wrapper"> 

<header id="page header"> 
<div 1... 
</header> 
<div id="content"> 

<section id="left sidebar"> </section>| 

















图 11-15 创建 left_sidebar 容器 





#content { 
width:1000px; 
float:left; 

} 


#1left sidebar { 
width:240px; 
height:500px; 
float:left; 


11-16 left_sidebar 的 CSS 规则 


(3) 在 left_sidebar 容器 内 部 插入 名 为 search 的 DIV 容器 ,用 于 制作 商品 搜索 栏 。 
在 该 容器 内 部 插入 表单 域 .文本 字段 和 按钮 ,具体 页 面 结构 如 图 11-17 所 示 。 切 换 到 
style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-18 所 示 。 保 存 当 前 文档 ,预览 效果 如 





图 11-19 所 示 。 


(4) 将 光标 定位 在 二 div id 一 "search" 之 二 /div 之 标签 的 后 面 , 使 用 nav 元 素 创建 名 


为 left_nav 的 容器 。 
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<GiY id="content"> 
<section id="left sidebar"> 
<div id="search"> 
<form action="" method="get" > 
<input name="searchtext" type="text" 
class="newsletter input" id="searchtext" value= 
"keyword" size="25"/> 
<input type="submit" name="button" id= 
"button" class="button" value=" 搜 索 " /> 
</form> 
</div> 
</section> 
</div> 








#search { 
background:#f£7f7f7; 
padding:20px 10px; 

} 

#searchtext { 
height:20px; 

} 

#button { 
color:#000; 
background:#ffc850; 
font:bold llpx Arial, Helvetica, 

sans-serif; 
text-decoration:none; 
margin-left:10px; 
border:1px solid #5b7a92; 

} 

#button:hover { 
cursor:pointer; 
Color:#fff; 
background:#663300; 
border:1lpx solid #ffc850; 











图 11-17 商品 搜索 栏 的 页 面 结构 


图 11-18 商品 搜索 栏 的 CSS 规则 


(5) 在 left_nav 容器 内 部 ,依次 创建 应 用 sider_title_box 类 规则 的 DIV 容器 ,以 及 应 
用 left_menu 类 规则 的 无 序列 表 ,. 用 于 实现 左 侧 商品 分 类 导航 栏 ,具体 页 面 结构 如 
图 11-20 所 示 。 





zdlv 1d="content™y 
<section id="left sidebar"> 
<div id="search"> 





< 
</div> 
<nav id="left nav"> 
<div class="sider title_box"> 进 口 商 品 </div>| 
<ul class="left menu"> 
<li><a href="#"> 进 口 牛 奶 </a></1i> 
<1li><a href="#"> 进 口 坚果 </a></1i> 
<1li><a href="#"> 进 口 咖 啡 c/a></1i> 
<1i><a href="#"> 糖 果 巧 克 力 </a></1i> 
<li><a href=" 才 "> 进口 密 线 </a></11i> 
<li><a href=" 手 "> 进口 鹏 化 </a></11> 
</ul> 
<div class="clear"></div> 
</nav> 
</section> 
</div> 


图 11-20 左 侧 商 品 分 类 导航 栏 的 页 面 结构 














图 11-19 商品 搜索 栏 的 预览 效果 





(6) 切换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-21 所 示 。 保 存 当 前 文档 ， 
预览 效果 如 图 11-22 所 示 。 

(7) 将 光标 定位 在 图 11-20 所 示 的 二 div class 王 "clear" 二 一 /div 二 标签 后 面 , 在 当前 
位 置 插入 应 用 sider_title_box 类 规则 的 DIV 容器 ,以 及 应 用 left_menu 类 规则 的 无 序列 
表 , 如 图 11-23 所 示 。 由 于 之 前 已 经 创建 了 对 应 的 类 规则 ,这 里 当 页 面 结 构 创建 完成 时 ， 
页 面 效果 自动 呈现 出 来 ,如 图 11-24 所 示 。 

(8) 将 光标 定位 在 图 11-23 中 二 div class 王 "clear" 二 二 /div 之 标签 后 面 , 在 当前 位 置 
插入 应 用 sider_title_box 类 规则 的 DIV 容器 ,以 及 应 用 guide 类 规则 的 DIV 容器 ,将 预 
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-sider titie box 1 
background: 
lurl (images/sider title box bg.gif)| 
Ino-repeat left bottom; 
height:25px; 





padding-—lef' ? 
font-family: "黑体 "; 





} 
ul .left_menu { 
padding:10px; 
} 
ul .left menu 1i { 
float:left; 
margin-left:Spx; 





} 
ul.1left menu li af 
width:80px; 
height:25px; 

line-height:25px; YUZE FOOD 
display:block; 
border-bottom:1px #e4e4e4 kw | Ez 
dashed; rE 
color:#504b4b; 
padding-left:10px; 
} 
ua .left_menu 1i a:hover { ee 
background: 厌 果 巧克力 
url (images/a_ hover bg.gif) 
Ino-repeat left center; 








} 





图 11-21 左 侧 商品 导航 栏 的 CSS 规则 


enav id="left nav"> 
<div class="sider_title_box"> 进 口 商品 </div> 
<ul class="left menu"> 


厅 果 巧克力 
进口 生化 








</ul> 

<diy class="clear"></div> 

<div class="sider_title_box"> 茶 咖啡 冲 饮 </div> 
<ul class="left menu"> 

Klis<a - 
</al> 
<div class="clear"></div> 









































<div class="sider_title_box"> 生 鲜 水 果 </div> 
<ul class="left menu"> 
Se 着 有 制品 
</u1> 
<div class="clear"></div> 症状 
</nav> 





图 11-23 ”继续 添加 左 侧 商 品 导航 栏 内 容 的 页 面 结构 图 11-24 添加 更 多 内 容 后 的 预览 效果 
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先 准备 好 的 图 像 插入 其 中 ,其 结构 如 图 11-25 所 示 。 
(9) 切换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-26 所 示 。 保 存 当 前 文档 ， 


预览 效果 如 图 11-27 所 示 。 





width="240" height="71" /></div> 


lwidth="240" height="71" /></div> 











Ziv class="clear"></div> 
<div class="sider_title_box"> 站 内 向 号 </div> 
<div class="guide"> <img src="images/guide 01.jpg"| 
<div class="guide"><img src="images/guide 02.jpg" 


Xdiv class="clear"></div> 





-guide { 
height:80px; 





margin:10px 0; 





图 11-25 插入 图 像 图 11-26 图 像 的 CSS 规 则 


3. 主页 右 侧 主体 区 域 的 制作 


(1) 将 光标 定位 在 二 section id 王 "left_sidebar" 二 二 /section 二 标签 的 后 面 ,使 用 
section 元 素 创建 名 为 right_content 的 容器 。 

(2) 在 right_content 容器 内 部 插入 名 为 banner 的 DIV 容器 ,切换 到 style. css 文件 
中 ,创建 相关 CSS 规则 ,如 图 11-28 所 示 。 保 存 当前 文档 ,预览 效果 如 图 11-29 所 示 。 








;免费 电话 
00-123-1234567 


客服 时 间 : 900-2200 





#right content 1 
float:left; 
width:750px; 
} 
#banner { 
width:740px; 
height:25S5px; 
background: url (images/banner .jpg)| 
no-repeat left bottom; 
border-left:Spx #663366 solid; 
border-bottom: 5px #663366 solid; 
border-right:Spx #663366 solid; 





图 11-28 ”banner 容器 的 CSS 规则 














11-29 插入 banner 容器 后 的 预览 效果 
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(3) 在 banner 容器 后 面 插入 应 用 content_title_bar 类 的 DIV 容器 ,此 时 页 面 结 构 如 
图 11-30 所 示 。 切 换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-31 所 示 。 





-Content title bar { 
height:30px; 
background:#FFF 
lurl (images/content title bar bg.gif) 




















<div id="content"> no-repeat left center; 
<section id="left sidebar"> padding-left:60px; 
SEE line-height :30px; 
/EE font-family: "黑体 "; 
<section id="right content"> - Fe ” 
<div id="banner"></div> font-size:16px; 
<div class="content_title_bar"> 最 新 美味 </div>| Color:#663366; 
</section> margin: Spx 0; 
</div> } 











图 11-30 插入 应 用 content_title_bar 类 的 DIV 容器 11-31 content_title_bar 类 的 CSS 规则 


(4) 在 应 用 content_title_bar 类 的 DIV 容器 后 面 ,插入 应 用 prod_box 类 的 DIV 容 
器 ,用 于 盛 放 商 品 简要 信息 ,具体 页 面 结构 如 图 11-32 所 示 。 


erIon dr"rIONt Content™y 
<div id="banner"></div> 
ontent_title_bar"> 最 新 美星 </div> 








<div class="product_title">ca title-" 清 江 特 产 猪肉 干 ” href-"#" cargec-" blank"> 靖 江 特产 岳 肉 二 200g</a></div> 

<div class="product img">cimg src="images/001.jpg" width="110" height="110" /></div> 

<div class™"prod price"><span class="reduce">kyen;15.8¢/span> <span class="price">byen;10.8¢</span></div>| 
</div> 





</section> 





图 11-32 插入 商品 的 简要 信息 


(5) 切换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-33 和 图 11-34 所 示 。 保 存 
当前 文档 ,预览 效果 如 图 11-35 所 示 。 


-Prod box 1 
width:120px; 
height:160px; 
border:1lpx #D4D4D4 solid; 
float:left; 
padding: Spx 10px; 
margin-left:Spx; 
margin-top: Spx; 














-Product title a:hover 1 
Color:#064ES5A; 
} 

-Product img { 
text-align:center; 
margin-bottom: 8px; 

} 

-Product title { 
text-align:center; 


时 

.prod price { 
text-align:center; 

} 

-Product title a { 
text-decoration:none; 
color: #333; 
padding:S5px 0 Spx 0; 
font-weight:bold; 
border:0; 


} 
span.reduce { 
Color:#666666; 
text-decoration:line-through;| 
‘ 
span.price { 
color: #DE1010; 








} 
图 11-33 商品 简要 信息 的 CSS 规则 (1) 图 11-34 商品 简要 信息 的 CSS 规则 (2) 





(6) 将 图 11-35 所 示 的 代码 复制 ,然后 执行 多 次 粘贴 操作 , 即 可 制作 出 多 个 商品 超 链 
接 , 如 图 11-36 所 示 。 
(7) 参照 步骤 (3) 一 步 又 (6) 的 方法 ,制作 出 主页 剩余 商品 的 超 链 接 , 如 图 11-37 所 示 。 
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最 新 美味 


薄 江 特产 猪肉 干 2009 





图 11-35 插入 商品 简要 信息 后 的 预览 效果 


站 帮 沁 半 负 
Ca 





最 新 美味 


清江 牢 产 插 内 二 2009 网 则 架 5000 新 牛 内 于 4009 同时 隐隐 组 5000 











图 11-36 插入 新 商品 后 的 预览 效果 


[EE 

A 
最 新 美味 

著 江 特产 猪 内 王 2009 


Msax10a 
超人 气 美味 


理 守 牛肉 条 2500 着 商 红 心 火 龙 果 
一 > 一 


W59129 


特价 美味 


基 商 进口 青 行 








图 11-37 插入 剩余 商品 简要 信息 后 的 预览 效果 
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4. footer 区 域 的 制作 

(1) 切换 到 设计 视图 ,使 用 footer 元 素 创建 页 面 版 权 区 域 ,并 将 该 区 域 (容器 ) 命 名 为 
footer, 

(2) 根据 需要 在 footer 容器 内 插入 Logo, 以 及 版 权 文字 内 容 , 具 体 结构 如 图 11-38 所 
示 。 切 换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-39 所 示 。 


footer id-"Footer™y 


<div id="footer logo"></div> 
iv id="footer mid"> 全 天 均 可 网 上 订购 ,支持 货 到 付款 ， 我 们 提供 的 付款 方式 有 | 
、 支 付 宝 。<br/> 


京 TCP 证 100000 号 京 公 网 安 备 110000000000 号 <br/> 
Copyright &copy; 2015-2017 宇 泽 互 联 All Rights Reserved </div> 
</footer> 





图 11-38 footer 区 域 的 页 面 结构 





footer 1 
height:90px; 
background:#CCC; 
clear:both; 
padding:10px; 
margin-top:20px; 

} 

#footer logo { 
float:left; 
width:240px; 
height:90px; 
background: 

rl(../images/foot logo.gif) no-repeat 


} 

#footer mid { 
float:left; 
width:730px; 
height:60px; 
padding:15px Spx; 
font:12px; 








图 11-39 footer 区 域 的 CSS 规 则 


(3) 保存 当前 文档 ,根据 预览 效果 细微 调整 某 些 CSS 规则 。 
至 此 ,“ 宇 泽 美食 "主页 的 布局 已 经 全 部 实现 完成 。 下 面 通过 模板 功能 快速 创建 网 站 
其 他 页 面 。 


11.3.2 检索 页 的 实现 


之 前 已 经 创建 了 网 站 主页 ,根据 最 初 的 网 站 规划 可 知 , 网 站 检索 页 的 布局 与 主页 有 部 
分 相似 之 处 ,这 里 拟 采 用 “模板 ”功能 快速 创建 检索 页 。 

1. 将 主页 另存 为 模板 

(1) 打开 index. html 页 面 ,执行 菜单 栏 中 的 “文件 ”>“ 另 存 为 模板 ”命令 ,打开 “另存 
模板 ”对 话 框 。 

(2) 在 “另存 模板 ”对 话 框 中 的 “站 点 ”下 拉 列 表 框 中 选择 站 点 “模板 示例 ”, 在 “另存 
为 "文本 框 中 输入 模板 名 称 muban。 单 击 “ 保 存 ” 按 钮 ,将 当前 页 面 index. html 保存 为 用 
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F 创 建 其 他 页 面 的 模板 。 


(3) 在 模板 文档 muban. dwt 中 选择 右 侧 主体 区 域 中 名 为 right_content 的 DIV 容器 。 
(4) 执行 菜单 栏 中 的 “插入 ”一 “模板 对 象 ”>>“ 可 编辑 区 域 ” 命 令 ,或 者 按 Ctrl 二 Alt 十 


V 键 ,此 时 打开 “新 建 可 编辑 区 域 ” 对 话 框 。 在 该 对 话 框 的 名称” 文本 框 中 输入 可 编辑 区 
域 的 名 称 right_content, 单 击 “ 确 定 ” 按 钮 , 即 可 建立 可 编辑 区 域 。 


2. 根据 模板 创建 list. html 文档 
(1) 执行 菜单 栏 中 的 “文件 ”一 “新 建 " 命 令 , 打 开 “ 新 建文 档 ” 对 话 框 。 选 择 “ 模 板 中 的 


页 ”选项 卡 , 在 “站 点 "列表 中 选择 当前 站 点 下 的 模板 文件 muban, 单 击 “ 创 建 " 按 钮 , 即 可 
基于 模板 创建 一 个 新 页 面 。 


(2) 删除 right_content 容器 内 部 所 有 内 容 , 然 后 在 其 内 部 插入 名 为 sub_banner 的 


DIV 容器 ,具体 结构 如 图 11-40 所 示 。 


(3) 切换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-41 所 示 。 


Fup banner 1 
width: 740px; 





height: 150px; 
background: 
url(../images/sub_banner_bg.jpg) 
no-repeat left center; 
border-left: Spx #d9cab2 solid; 
border-bottom: Spx #d9cab2 solid; 





<div id="right content"> 








<div id="sub banner"></div> border-right: Spx #d9cab2 solid; 
</div> 
图 11-40 插入 sub_banner 容器 图 11-41 sub_banner 的 CSS 规则 





(4) 参照 主页 中 制作 商品 信息 列表 的 方法 ,在 当前 二 级 页 面 中 创建 相同 结构 的 信息 


列表 ,使 之 呈现 出 如 图 11-42 所 示 的 效果 。 


em 区 1 


首 而 “ 字 夺 扩 字 ” 受 物 诈 南 “ 关 合 于 信 ”新品 土 蕴 ”特色 寺 区 订阅 邮 香 五 系 拍 们 入 告 地 区 








图 11-42 二 级 页 面 的 预览 效果 
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(5) 在 商品 信息 列表 的 后 面 插入 应 用 pagination 类 的 DIV 容器 ,并 在 其 中 插入 一 组 


无 序列 表 , 页 面 结构 如 图 11-43 所 示 。 


<div class="pagination"> 
<ul> 
<li class="disablepage"> 上 一 页 </1i 
<1i class="currentpage">1</1i> 
<li><a href="#">2</a></1i> 
<li><a href="#">3</a></1i> 
<li><a href="#">4</a>...</1i> 
<li><a href="#">5</a></1i> 
<li><a href="#">6</a></1i> 
<li><a href="#">7</a></1i> 
<li><a href="#">8</a></1i> 
<1i><a href="#"> 下 一 页 </a></1i> 
</ul> 
</div> 


11-43 ”插入 应 用 pagination 类 的 容器 











(6) 切换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-44 和 图 11-45 所 示 。 





-Pagination T 
height:25px; 
margin-top:10px; 

} 

-pagination ul { 
margi 
padding: 0; 
text-align: right; 
font-size: 12px; 





} 

-pagination 1i { 
list-style-type: none; 
display: inline; 
padding-bottom: lpx; 


} 

-pagination a, .pagination a:visited 
padding: 0 Spx; 
border: lpx solid #9aafe57 
text-decoration: none; 
color: #2e6abl; 








图 11-44 ”pagination 相关 CSS 规则 (1) 


-pagination a:hover, .pagination a:active { 
border: lpx solid #2b66a5; 
color: #000; 
background-color: #FFC; 

} 

.pagination 1i.disablepage { 
padding: 0 Spx; 
border: lpx solid #929292; 
color: #929292; 

} 

-pagination li.currentpage { 
font-weight: bold; 
padding: 0 Spx; 
border: lpx solid navy; 
background-color: #2e6abl; 
Color: #FFF; 











图 11-45 ”pagination 相关 CSS 规则 (2) 
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(7) 保存 当前 文档 ,预览 效果 如 图 11-46 所 示 。 








上 -页 | 项 [21[31[41.[51[6][7][8][ 下 = 页 ] 








图 11-46 页 脚 预览 效果 


11.3.3 产品 信息 页 的 实现 


当 访 问 者 选中 某 个 产品 时 ,网 站 将 自动 跳 转 到 该 产品 的 详细 信息 页 面 。 在 此 页 面 中 ， 
主要 对 产品 的 各 种 信息 加 以 描述 ,使 得 浏览 者 深入 了 解 要 购买 的 产品 。 由 于 此 页 面 与 首 
页 的 布局 有 一 定 相 似 之 处 ,这 里 同样 可 以 使 用 模板 功能 创建 该 页 面 。 

(1) 使 用 模板 创建 新 页 面 ,删除 right_content 容器 内 部 所 有 内 容 , 然 后 在 其 内 部 插入 
名 为 sub_banner 的 DIV 容器 。 

(2) 在 sub_banner 容器 后 面 插入 应 用 content_title_bar 类 的 DIV 容器 。 在 该 容器 
后 面 插入 名 为 pro_info 的 DIV 容器 ,并 根据 需要 添加 相关 图 像 和 文字 信息 ,具体 页 面 结 
构 如 图 11-47 所 示 。 


a idq=ri9hE content™ | 
<div id="sub banner"></div> 
<div class="content_title_bar"> 美 食 详情 </div> 
<div id="pro_info"> 
<div class="product bigimg"><img src= 
"images/product_bigimg 01.jpg" width="350" height="250" /></div)| 
<div class="details big box"> 
<h3> 墨 西 哥 进 口 牛 油 果 6 个 约 2 斤 </h3> 
<ul> 
<1i> 商 品 编号 ; 1045136542</1i> 
<1i> 宇 泽 价 : &yen;79.00</1i> 
<1i> 商 品评 分 : 5 分 </11> 
<1i> 促 销 消息 : 此 商品 由 北京 京 爷 丰 园 提供 ，VIP 享 受 96 折 </11> 
<1i> 同 城 服务 : 同城 24 小 时 物流 送 货 上 门 </1i> 
<1i> 库 存 情况 : 现货 </1i> 
<1i> 运 虽说 明 : 北京 、 上 海 、 深 圳 三 仓 发 货 ， 确 保 新 鲜 </11> 
<1i> 购 买 数 重 : 2</1i> 
</ul> 
<a href="#" class="prod_buy"> 加 入 购物 车 </a> <a href="#" 
class="prod_buy"> 收 藏 该 商品 </a> </div> 
</div> 
</div> 











图 11-47 插入 应 用 content_title_bar 类 的 DIV 容器 


(3) 切换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 图 11-48 和 图 11-49 所 示 。 

(4) 保存 当前 文档 ,预览 效果 如 图 11-50 所 示 。 

(5) 在 pro_info 容器 后 面 ,插入 名 为 pro_jieshao 的 DIV 容器 ,并 在 其 中 输入 商品 的 
详细 信息 ,具体 结构 如 图 11-51 所 示 。 切 换 到 style. css 文件 中 ,创建 相关 CSS 规则 ,如 
图 11-52 所 示 。 保 存 当 前 文档 ,通过 浏览 器 即 可 看 到 最 终 效 果 。 

至 此 ,“ 宇 泽 美 食 ” 主 要 类 型 网 页 已 经 全 部 制作 完成 ,读者 可 以 根据 自己 的 喜好 修改 相 
关 的 CSS 规则 ,进一步 美化 整个 页 面 。 





#pro_ info { 
height:280px; 
padding:S5px 20px; 

} 

-Product bigimg { 
width:350px; 
height:250px; 
float:left; 

} 

-prod buy { 
width:75px; 
height:24px; 
display:block; 
float:left; 
background: 

ur1(../images/link bg.gif)| 

no-repeat center; 
margin:2px 0 0 Spx; 
text-align:center; 
line-height:24px; 
text-decoration:none; 
color: #006600; 





} 


图 11-48 ”产品 信息 内 容 相关 的 CSS 规则 (1) 
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-details big box T 
width:340px; 
float:left; 
margin-left:20px; 
text-align:left; 





} 
-details big box h3 { 
Color:#663366; 

text-align:center; 
font-size:16px; 
font-weight :bold; 
} 
.details big box ul I 
padding:5px 10px 5px 10px; 
} 
.details big box 1i { 
border-bottom:1px #CCC dashed; 
height:25px; 





} 
图 11-49 产品 信息 内 容 相 关 的 CSS 规则 (2) 











墨西哥 进口 牛 油 果 6 个 约 2 斤 
商品 编号 : 1045136542 
字 当 价 : W7900 
商品 评分 : 5 分 
促 消 消息 : 此 商品 由 北京 京 地 丰 因 提 供 ，VIP 齐 要 96 折 
网 城 服务 : 同城 24 小 时 攀 流 送 化 上 门 
库存 情况 : 现货 
运 珊 说 明 : 北京 、 上 海 、 盏 加 三 仓 发 天， 确保 新 评 
购买 教 量 : 2 


加 入 购物 车 收藏 该 商品 


11-50 产品 信息 预览 效果 


div id="pro Jieshaosy 
<h3> 产 品 详细 介绍 </h3> 
<div class="jieshao"> 
<br> 

</div> 

<h3> 注 意 事项 </h3> 

<div class="jieshao"> 
<p> 攻 于 /p> 
<p>lE </p> 
<p>E: /p> 
<br> 
<br> 

</div> 

</div> 


图 11-51 输入 商品 的 介绍 内 容 




















#pro jieshao { 
height:300px; 
margin-top:10px; 
background:#e7e3de; 
padding:20px; 

} 

#pro jieshao h3 { 


Color:#663366; 
font-size:16px; 


} 

-jieshao { 
background:#FFF; 
padding:Spx; 





图 11-52 商品 介绍 内 容 相关 的 CSS 规则 
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11.4 习题 


1. 使 用 DIV 十 CSS 的 方式 制作 如 图 11-53 所 示 的 页 面 。 








图 11-53 题 1 图 


2. 策划 一 个 电子 商务 网 站 ,并 撰写 网 站 策划 ,要 求 使 用 DIV 十 CSS 的 方式 制作 出 网 
站 的 一 些 子 页 面 ,如 图 11-54 一 图 11-56 所 示 。 








图 11-54 网 站 主页 面 


第 11 章 综合 案例 解析 一 一 电子 商务 网 站 Se 








图 11-55 网 站 查询 列表 页 








a a EB 2 a 





图 11-56 产品 详细 信息 页 面 


AN 


第 12 章 





实 训 指 导 


【本 章 导 读 】 

本 章 拟 采 用 独立 完成 整个 实 训 的 形式 ,锻炼 读者 独立 思考 、 开 发 和 解决 困难 的 能 力 ， 
并 使 其 通过 综合 实 训 的 锻炼 ,能 够 快速 找到 自身 不 足 , 为 进一步 独立 找 准 方向 。 

【学 习 目 标 】 

名 掌握 网 站 前 台 开 发 的 基本 流程 ; 

名 提高 团队 协同 工作 的 基本 素养 。 


12.1 实 训 的 意义 和 目的 


1. 意义 

根据 教学 计划 的 要 求 ,在 教师 的 统筹 指导 下 对 学 生 进 行 网 页 制作 专项 技能 的 训练 , 培 
养 学 生 综 合 运 用 理论 知识 分 析 和 解决 实际 问题 的 能 力 , 实 现 由 理论 知识 向 操作 技能 和 经 
验 的 增强 转化 。 因 此 ,有 成 效 的 实 训 教学 ,对 实现 本 专业 的 培养 目标 ,提高 学 生 的 综合 素 
养 有 着 重要 的 作用 。 

2. 目的 

通过 综合 实 训 进一步 巩固 、 深 化 和 扩展 学 生 的 理论 知识 与 专业 技能 ,具体 包括 以 下 几 
个 方面 。 

(1) 熟练 掌握 网 页 布局 规划 、 分 析 的 方法 。 

(2) 熟练 掌握 HTML 5 的 基本 语法 和 新 增 元 素 知识 ,并 且 能 够 熟练 使 用 网 页 制作 软 
件 Dreamweaver CS6 的 使 用 方法 。 

(3) 熟练 掌握 在 网 页 中 插入 文字 、 图 像 、 表 单 和 表格 等 多 种 元 素 的 方法 。 

(4) 熟练 掌握 CSS 样式 的 基本 使 用 方法 ,以 及 CSS 3 中 新 增 属性 的 使 用 方法 ,达到 灵 
活 运 用 CSS 美化 页 面 元 素 的 能 力 。 

(5) 掌握 网 站 测试 的 方法 。 

(6) 培养 学 生 获 取信 息 和 处 理 信 息 的 能 力 ,例如 ,通过 网 络 .书籍 等 方式 搜集 前 沿 技 
术 和 特效 代码 等 。 

(7) 培养 学 生理 论 联系 实际 的 工作 作风 严肃 认真 的 科学 态度 以 及 独立 工作 的 能 力 ， 
树立 自信 心 。 
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(8) 培养 团队 协作 精神 和 共同 开发 网 站 的 综合 能 力 。 


12.2 实 训 要 求 与 步 又 


1. 实 训 要 求 

(1) 制作 网 页 前 ,必须 做 好 网 站 的 需求 分 析 , 策 划 好 网 站 的 主题 ,规划 好 网 站 的 风格 
和 结构 ,创建 完善 的 目录 结构 。 

(2) 在 确定 网 站 主题 的 情况 下 ,收集 所 需 的 文字 资料 图像 资料 。 

(3) 制作 的 网 站 建议 包括 3 个 页 面 ,第 一 个 为 首页 ,第 二 个 为 二 级 子 页 ,第 三 个 为 内 
容 页 。 其 中 ,首页 必须 包含 导航 栏 , 二 级 子 页 与 内 容 页 之 间 必 须 通 过 模板 进行 制作 。 若 网 
站 制作 较为 复杂 ,可 以 仅 制作 首页 。 

(4) 所 有 页 面 根据 规划 合理 插入 图 像 、Flash 动画 和 视频 等 元 素 ,使 内 容 充 实 \ 布 局 合 
理 .颜色 搭配 协调 、 美 观 大 方 。 

(5) 页 面 尺 十 符合 当前 设计 潮流 和 规范 ,站 点 中 文件 或 文件 夹 的 命名 应 当 规范 ,达到 
见 名 知 意 、 容 易 理解 的 程度 。 

(6) 小 组 成 员 之 间 , 既 要 分 工 明 确 , 又 要 密切 合作 ,培养 良好 的 互助 .协作 精神 。 

(7) 独立 完成 规定 的 实 训 内 容 , 不 得 弄虚作假 ,不 准 抄袭 或 复制 他 人 的 网 页 或 内 容 。 

2. 实 训 步骤 

(1) 分 组 : 建议 独立 完成 整个 实 训 全 部 内 容 , 若 自身 实力 较 弱 ,可 以 2 一 3 人 为 一 组 ， 
每 一 组 选 定 一 名 组 长 ,主要 负责 本 组 所 有 事务 。 

(2) 选 题 : 组 内 成 员 相互 讨论 .确定 适合 的 网 站 主题 。 例 如 : 

QO 班级 活动 专题 网 。 

@ 教学 资源 共享 网 站 。 

@ 新 闻 类 综合 网 站 。 

@ 公司 类 网 站 。 

响应 式 布局 类 网 站 。 

@ 团购 类 网 站 。 

@ 博客 类 网 站 。 

(3) 分 工 : 若 本 组 中 包含 多 人 , 则 由 教师 根据 每 组 成 员 之 前 的 学 习 情 况 ,合理 分 配 具 
体 的 任务 ,但 每 个 成 员 必 须 完成 一 个 页 面 的 制作 。 

(4) 根据 不 同 分 工 , 成 员 分 头 行动 收集 所 需 素材 、 制 作 页 面 。 

(5) 页 面 整合 与 测试 。 

(6) 撰写 实 训 报告 书 。 


12.3 考核 标准 


根据 实 训 期 间 的 纪律 考核 情况 、 对 待 实 训 的 态度 ,站 点 的 目录 结构 ,各 个 页 面 的 布局 
结构 、 颜 色 搭配 ,文字 、 图 像 . 动 画 的 合理 搭配 ,网 页 之 间 的 链接 是 否 顺 畅 ,网 页 制作 技术 的 
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应 用 ,网 站 的 整体 浏览 效果 等 方面 进行 综合 评分 。 评 分 考核 标准 如 表 12-1 所 示 。 


表 12-1 评分 考核 标准 





序号 


考核 细则 


分 值 比例 /% 





网 站 效果 


网 站 内 容 : 主题 鲜明 ,内 容 健康 ,图 像 .动画 等 元 素 能 够 正确 反映 
网 站 主题 





版 面 布局 : 布局 合理 ,色彩 搭配 协调 、 美 观 





CSS 样式 : 书写 命名 规范 ,应 用 合理 无 元 余 





技术 含量 : 根据 网 站 主题 ,合理 选择 相关 技术 
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实 训 纪 律 


实 训 期 间 组 织 纪律 性 强 , 无 迟到 、 早 退 \ 缺 课 现象 





成 员 协 作 


小 组 成 员 间 分 工 明 确 , 所 有 的 成 员 在 规定 时 间 内 完成 实 训 任务 ,无 
雷同 或 抄袭 现象 








实 训 报告 





书写 规范 ,内 容 翔 实 ,有 实际 收获 





合计 
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